Hệ thống bản đồ trực tuyến sử dụng GOOGLE MAP API

rên chính máy chủ của nhà cung cấp dịch vụ. Thay vì chỉ đơn giản xuất bản các trang web, một số nhà cung cấp dịch vụ đã tích hợp các dịch vụ web như YouTube, Flickr hay Amazon.com … cho phép người dùng có thể tự tạo ra các mash-up của riêng họ. Ứng dụng kết hợp Một xu hướng Web 2.0 phổ biến hiện nay là mash-up, tức mọi người kết hợp các bộ dữ liệu khác nhau để tạo nên một dịch vụ hoặc sản phẩm mới. Nói đơn giản, mash-up tương tự việc người ta tách bài hát trong các album của các nghệ sỹ ở từng thời kỳ... để chọn ra những ca khúc mà họ hài lòng nhất. Google Maps là nền tảng yêu thích của giới tạo mash-up, như xây dựng bản đồ chứa thông tin về tội phạm, về các hộ dân cư hoặc bản đồ thuế.... Một số trang web về du lịch có sử dụng bản đồ trực tuyến Giới thiệu trang web Tại địa chỉ www.ciren.gov.vn, người truy cập có thể xem được bản đồ giao thông; bản đồ hệ thống các vườn quốc gia, khu bảo tồn, rừng ngập mặn; bản đồ hiện trạng sử dụng đất, quy hoạch đất; thông tin ảnh hàng không và ảnh vệ tinh... Trong cuộc sống, do quá bận rộn với những công việc hằng ngày mà những danh lam thắng cảnh của nước ta ít được các bạn biết đến hoặc chỉ biết vài nơi quen thuộc, nổi tiếng mà thôi. Trang Web thangcanhdep.com có giao diện đẹp mắt, bố cục rõ ràng, dễ dàng trong việc tra cứu và sử dụng. Website đang hoạt động với gần 100 khu du lịch, địa điểm, danh lam thắng cảnh của nước ta được sắp xếp theo từng chủ đề, từng chỉ mục như Thắng cảnh, Du lịch biển, Hang động, Vườn quốc gia.... Hơn thế nữa, các hình ảnh minh họa cho những đề mục giống như trong tập Atlas Việt Nam, nên các bạn sẽ không gặp phải những khó khăn trong lúc tra cứu. Hình 1: Hình ảnh website có sử dụng bản đồ trực tuyến Giới thiệu bài toán Ở các trang web trên hầu hết chỉ mang tính giới thiệu về mặt hình ảnh cùa một vùng nào đó trên bản đồ trực tuyến, chưa có các đoạn video quảng bá, các đoạn văn mô tả ngắn. Bên cạnh đó hạn chế về mặt cơ sở dữ liệu như việc giới thiệu hình ảnh về các thành phố lớn của đất nước. Vì thế việc quảng bá hình ảnh của đất nước với thế giới đã phần nào hạn chế. Cùng với các trang web sử dụng bản đồ trực tuyến, tôi đã xây dựng trang web quản lý hệ thống thông tin.Trước hết cho phép người dùng có thể xem được thông tin về các thủ đô gồm diện tích, dân số và một số thông tin liên quan đến thủ đô đó. Bên cạnh đó hiển thị video và hình ảnh về thủ đô đó. Đồng thời hiển thị vị trí vĩ độ, kinh độ của thủ đô đó trên bản đồ trực tuyến.Ngoài ra trang web còn cho phép người quản lý có thể nhập dữ liệu, chèn thêm dữ liệu, xoá hay sửa đổi dữ liệu khi thông tin thay đổi. Ở đây tôi sử dụng công nghệ ASP.NET trên nền Web 2.0. Tạo cơ sở dữ liệu bằng SQL server 2005 kết hợp với cơ sở dữ liệu bản đồ Google Map để hiển thị thông tin. Trong chương tiếp theo chúng ta sẽ tìm hiểu kỹ hơn về Google Map API dùng cơ sở dữ liệu của Google Map kết hợp với cơ sở dữ liệu tự xây dựng GOOGLE MAP API Basics (Cơ bản) Loading the Google Maps API (Tải Google Map API) Lấy bản đồ từ Google Map bằng cách Truy cập URL nằm trong thẻ javascript sẽ chứa các tất cả các ký tự đặc biệt và các định nghĩa khi bạn cần sử dụng Google Map API. Trang web phải chứa đoạn script sử dụng khoá khi đăng nhập vào sử dụng API . Trong ví dụ này khoá được xem như "abcdefg" . Map DOM Elements Để hiện thị bản đồ lên trang web thông thường người ta sử dụng thẻ div và thiết lập các yếu tố trong trình duyệt Document Object Model(DOM). Trong ví dụ trên một div có id là “map_canvas” và đặt kích thước sử dụng các thuộc tính(độ rộng, chiều cao). Có thể sử dụng GmapOptions xây dựng bản đồ, sử dụng kích thước của những đối tượng chứa trong nó làm kích thước của chính nó. The Elementary Object var map = new GMap2(document.getElementById("map_canvas")); Bên cạnh đó ta có thể sử dụng lớp JavaScript cung cấp một bản đồ được đặt tên GMAP2. Những đối tượng của lớp này sẽ tạo nên một bản đồ đơn trên web. Ta có tạo một trường hợp của lớp này bằng cách sử dụng toán tử new của javascript. Initializing the Map (Khởi tạo bản đồ) map.setCenter(new GLatLng(37.4419, -122.1419), 13); Trước khi việc tạo một bản đồ dùng hàm GMap2, cần phải khởi tạo nó. Sự khởi tạo này được hoàn thành với sự sử dụng hàm setCenter(). Phương pháp setCenter() yêu cầu một tọa độ GLatLng và mức khung nhìn bản đồ, phương pháp này phải được thực thi trước mọi thao tác khác thực hiện trên bản đồ. Loading the Map(Tải bản đồ) Để bảo đảm bản đồ của ta chỉ được đặt lên trang sau khi đã tải trang đó từ server xong, ta thực hiện chức năng xây dựng đối tượng GMap2 .Phần tử của trang HTML nhận được một sự kiện onload. Vì thế tránh được hành vi không thể đoán trước và đưa cho chúng ta nhiều điều khiển trên bản đồ. Latitudes and Longitudes (Vĩ độ và kinh độ) Bây giờ mà chúng ta có một bản đồ, ta cần một cách thức xác định vị trí trên bản đồ. Đối tượng GLatLng cung cấp một cơ chế như vậy bên trong bản đồ Google API. Bạn xây dựng một đối tượng GLatLng, chứa những tham số (của) nó {Vĩ độ, kinh độ} var myGeographicCoordinates = new GLatLng(myLatitude, myLongitude) Chẳng hạn, một bản đồ trình bày một “cửa sổ” hiện thời của toàn bộ thế giới bên trong cái gì được biết như một viewport. Viewport này có thể định nghĩa gần những điểm hình chữ nhật . Đối tượng GLatLngBounds cung cấp chức năng này, định nghĩa một vùng hình chữ nhật sử dụng hai đối tượng GLatLng đại diện cho southwest và những góc đông bắc. Hình 2: Thêm 10 vị trí đánh dấu khác nhau trên bản đồ function initialize() {  var map = new GMap2(document.getElementById("map_canvas"));  map.setCenter(new GLatLng(37.4419, -122.1419), 13);   // Thêm 10 vị trí đánh dấu ở vị trí khác nhau trên bản đồ  var bounds = map.getBounds();  var southWest = bounds.getSouthWest();  var northEast = bounds.getNorthEast();  var lngSpan = northEast.lng() - southWest.lng();  var latSpan = northEast.lat() - southWest.lat();  for (var i = 0; i < 10; i++) {    var point = new GLatLng(southWest.lat() + latSpan * Math.random(),        southWest.lng() + lngSpan * Math.random());    map.addOverlay(new GMarker(point));  }} Map Attributes (Thuộc tính bản đồ) Mặc định bản đồ trong Google API sử dụng nền tảng đã được “vẽ” chuẩn.Tuy nhiên, những bản đồ Google API cũng hỗ trợ những kiểu những bản đồ khác. Các loại bản đồ dưới đây là chuẩn G_NORMAL_MAP : Khung nhìn mặc định G_SATELLITE_MAP : hình ảnh từ vệ tinh G_HYBRID_MAP : Bản đồ trộn giữa khung nhìn mặc định và khung nhìn từ vệ tinh G_DEFAULT_MAP_TYPES : Một tập hợp gồm 3 loại trên , hữu dụng cho việc xử lý lặp. Có thể thiết lập loại bản đồ bằng cách sử dụng phương thức GMap2 object’s setMapType() Chẳng hạn, mã sau đây đặt bản đồ để sử dụng hình ảnh vệ tinh từ Google Earth var map = new GMap2(document.getElementById("map_canvas")); map.setMapType(G_SATELLITE_MAP); Bản đồ cũng chứa đựng một số thuộc tính hữu ích cho việc xác nhận. Chẳng hạn, để tìm ra kích thước của khung nhìn hiện tại ta sử dụng phương thức GMap2 object’s getBounds() pháp để trả lại một giá trị GLatLngBounds. Ta có thể phóng to hoặc thu nhỏ bản đồ để có những khung nhìn tuỳ ý. Ta có thể nhìn toàn bộ thế giới bằng cách thu bản đồ nhỏ nhất(mức 0) hay phóng to cực đại để có thể nhìn được từng toà nhà riêng rẽ(mức 19) trong khung nhìn bình thường. Với khung nhìn từ vệ tinh có thể phóng to đến mức 20.Bạn có thể khôi phục mức tăng giảm hiện thời đang sử dụng bởi bản đồ bởi việc sử dụng phương thức GMap2 object’s getZoom() Map Interactions (Tuỳ biến bản đồ) Nó cung cấp khả năng tuỳ biến các đối tượng của bản đồ. Đối tượng Gmap2 cung cấp 1 số lượng các phương thức cấu hình để thay đổi chính những tác động của đối tượng bản đồ. Bạn có thể thay đổi bẳng một số phương thức tiện ích. Ví dụ phương thức Gmap2.disableDragging(). Huỷ bỏ khả năng kéo thả bản đồ tới vị trí mới. var map = new GMap2(document.getElementById("map_canvas"));map.setCenter(new GLatLng(37.4419, -122.1419), 13);window.setTimeout(function() {  map.panTo(new GLatLng(37.4569, -122.1569));}, 1000); Info Windows var map = new GMap2(document.getElementById("map_canvas"));map.setCenter(new GLatLng(37.4419, -122.1419), 13);map.openInfoWindow(map.getCenter(), document.createTextNode("Hello, world")); Event (Sự kiện) Event Listeners (Lắng nghe sự kiện) Các sự kiện trong Google Map API được xử lý bằng các chức năng tiện ích bên trong name space GEvent để tạo ra 1 đối tượng event listeners. Đối tượng này có tác dụng lắng nghe và bắt sự kiện. Ví dụ đối tượng Gmap2 cung cấp các sự kiện “click”, “double click” và “move”. Mõi sự kiện sẽ xảy ra trong các ngữ cảnh khác nhau. Khi người sử dụng di chuyển chuột sự kiện “mouse move” sẽ được thi hành.Phương thức tĩnh gevent.addListener() được sử dụng để thông báo mỗi khi các sự kiện xảy ra. Phương thức này chỉ ra một đối tượng, một sự kiện được lắng nghe và một hàm được khi sự kiện tương ứng xảy ra. Ví dụ dưới đây sẽ đưa ra một thông báo mỗi khi người sử dụng bấm vào bản đồ Hình 3: Bắt sự kiện khi click vào bản đồ var map = new GMap2(document.getElementById("map"));map.setCenter(new GLatLng(37.4419, -122.1419), 13);GEvent.addListener(map, "click", function() {  alert("You clicked the map.");}); Listener có khả năng nắm bắt ngữ cảnh của sự kiện. Đoạn code dưới đây sẽ hiển thị kinh độ và vĩ độ của phần trung tâm của bản đồ. var map = new GMap2(document.getElementById("map"));GEvent.addListener(map, "moveend", function() {  var center = map.getCenter();  document.getElementById("message").innerHTML = center.toString();});map.setCenter(new GLatLng(37.4419, -122.1419), 13); Using Closures in Event Listeners (Sử dụng Closuress trong lắng nghe sự kiện) Khi thực thi “even listenner” sẽ rất dễ dàng nếu như đối tượng đó có chứa dữ liệu trong nó. Javascipt không hỗ trợ trường hợp dữ liệu đã được đóng gói nhưng nó hỗ trợ hàm closure() cho phép các hàm nội tại truy cập đến các biến bên ngoài. Các even listener() sử dụng hàm này để truy cập các biến thường không nằm trong các đối tượng của sự kiện đó. Đoạn code dưới đây sử dụng hàm closure() để gán một thông điệp bí mật vào một tập hợp marker khi bấm vào mỗi marker sẽ hiện thị một phần của thông điệp bí mật đó. Phần thông điệp này không nằm trong nội tại của marker. Hình 4: Sử dụng Closuress trong lắng nghe sự kiện var map = new GMap2(document.getElementById("map_canvas"));map.setCenter(new GLatLng(37.4419, -122.1419), 13);// Creates a marker at the given point// The five markers show a secret message when clicked// but that message is not within the marker's instance datafunction createMarker(point, number) {  var marker = new GMarker(point);  var message = ["This","is","the","secret","message"];  marker.value = number;  GEvent.addListener(marker, "click", function() {    var myHtml = "#" + number + "" + message[number -1];    map.openInfoWindowHtml(point, myHtml);  });  return marker;}// Add 5 markers to the map at random locationsvar bounds = map.getBounds();var southWest = bounds.getSouthWest();var northEast = bounds.getNorthEast();var lngSpan = northEast.lng() - southWest.lng();var latSpan = northEast.lat() - southWest.lat();for (var i = 0; i < 5; i++) {  var point = new GLatLng(southWest.lat() + latSpan * Math.random(),    southWest.lng() + lngSpan * Math.random());  map.addOverlay(createMarker(point, i + 1));} Using Passed Arguments in Events (Truyền tham số trong sự kiện) Ta có thể truyền tham số vào các sự kiện. Đoạn code dưới đây, sự kiện “click” trên bản đồ truyền 2 tham số overlay và point. var map = new GMap2(document.getElementById("map_canvas"));map.setCenter(new GLatLng(37.4419, -122.1419), 13);// ground overlayGEvent.addListener(map,"click", function(overlay,point) {       var myHtml = "The GPoint value is: " + map.fromLatLngToDivPixel(point) + " at zoom level " + map.getZoom();  map.openInfoWindow(point, myHtml);});map.addControl(new GSmallMapControl());map.addControl(new GMapTypeControl()); ConTrol(Điều khiển) Controls Overview (Tổng quan về điều khiển) Bạn có thể sử dụng một số công cụ có sẵn của Map API trong bản đồ của mình GlargeMapControl: Có những nút lớn dùng để di chuyển hình ảnh, phóng to hoặc thu nhỏ bản đồ. GSmallMapControl: Có những nút nhỏ dùng để di chuyển hình ảnh, phóng to hoặc thu nhỏ bản đồ. GsmallZoomControl: GscaleControl: có thể Co dãn bản đồ GMapTypeControl: Các nút cho phép người sử dụng chuyển đổi giữa các loại bản đồ GHierarchicalMapTypeControl - a selection of nested buttons and menu items for placing many map type selectors. GOverviewMapControl - Một bản đồ tổng quan được xếp lại trong góc của màn ảnh Tất cả các điều khiển này được dựa vào đối tượng của GControl Một số kiểu bản đồ: G_NORMAL_MAP : Hiển thị ở dạng bình thường, thương là kiểu bản đồ 2D của Google Maps G_SATELLITE_MAP: Hiển thị hình ảnh chụp từ vệ tinh G_HYBRID_MAP : Hiển thị hình ảnh chụp từ vệ tinh kết hợp với những thực thể nổi bật như (đường, tên thành phố.) G_PHYSICAL_MAP : Hiển thị bản đồ địa lý dựa vào thông tin địa thế. Theo mặc định, Google Maps API cung cấp 3 loại bản đồ : G_NORMAL_MAP, G_SATELLITE_MAP và G_HYBRID_MAP. Bản có thể thay đổi nó qua 2 hàm do Google Map cung cấp là GMAP2.removeMapType() hoặc GMAP2.addMapType() Đoạn code dưới đây loại bỏ kiểu bản đồ G_HYBRID_MAP từ những kiểu bản đồ sẵn có. Khi ta gọi hàm GmapTypeControl chỉ có 2 kiểu bản đồ G_NORMAL_MAP và G_SATELLITE được hiển thị var map = new GMap2(document.getElementById("map_canvas"),  { size: new GSize(640,320) } );map.removeMapType(G_HYBRID_MAP);map.setCenter(new GLatLng(42.366662,-71.106262), 11);var mapControl = new GMapTypeControl();map.addControl(mapControl);map.addControl(new GLargeMapControl()); Adding Controls to the Map(Thêm 1 điều khiển lên bản đồ) Thêm những điều khiển bản đồ với Gmap2 phương thức addControl().Ví dụ bạn thêm điều khiển lấy toàn cảnh của bản đồ map.addControl(new GLargeMapControl()); Bạn có thể thêm nhiều điều khiển vào một bản đồ. Trong trường hợp này chúng ta sử dụng các điều khiển có sẵn là GsmallMapControl() và GmapTypeControl() cho phép quyết, phóng to thu nhỏ bản đồ và chuyển đổi giữa 2 kiểu Map và Statellite. Hình 5: Thêm 1 điều khiển lên bản đồ var map = new GMap2(document.getElementById("map"));map.addControl(new GSmallMapControl());map.addControl(new GMapTypeControl());map.setCenter(new GLatLng(37.4419, -122.1419), 13); Positioning Controls on the Map(Vị trí điều khiển trên bản đồ) Phương thức addControl() với tham số thứ 2 tuỳ chọn GcontrolPosition cho phép bạn xác định vị trí của điều khiển trên bản đồ. Dưới dây là một số giá trị thích hợp cho tham số này G_ANCHOR_TOP_RIGHT G_ANCHOR_TOP_LEFT G_ANCHOR_BOTTOM_RIGHT G_ANCHOR_BOTTOM_LEFT Nếu như không sử dụng các giá trị này thì Map API sẽ sử dụng vị trị mặc định được xác định bởi điều khiển đó. GcontrolPosition có thể xác định offset có thể chỉ ra bao nhiêu pixel từ các chiều của bản đồ tới vị trí của điều khiển. Offset này được xác định bởi đối tượng Gsize. Ví dụ này thêm điều khiển GmapTypeControl vào góc trên bên phải của bản đồ với độ cách của các chiều là 10 pixel. Click dobuble vào mọi chỗ trên bản đồ sẽ chuyển điều khiển này xuống góc dưới bên phải bản đồ var map = new GMap2(document.getElementById"map_canvas"));var mapTypeControl = new GMapTypeControl();var topRight = new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10,10));var bottomRight = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,10));map.addControl(mapTypeControl, topRight);GEvent.addListener(map, "dblclick", function() {  map.removeControl(mapTypeControl);  map.addControl(new GMapTypeControl(), bottomRight);});map.addControl(new GSmallMapControl());map.setCenter(new GLatLng(37.4419, -122.1419), 13); Modifying the Makeup of Standard Controls (Sửa chữa và tạo ra những điều khiển chuẩn) Hầu hết các điều khiển trong Google Map API chứa những phương thức xử lý chuẩn. Tuy nhiên một số điều khiển đòi hỏi khởi tạo cho mục đích sử dụng thích hợp. Ví dụ điều khiển GhierarchicalMapTypeConTrol yêu cầu 1 số hàm khởi tạo để hiện thị các loại bản đồ bên trong “menu” với một trình tự thích hợp Ở ví dụ này sẽ vé sẵn 1 lưới bản đồ ở dưới sau đó tạo ra GhierarchicalMapTypeControl để sắp xếp các đối tượng bản đồ phủ lên trên. Hình 6: Sửa chữa và tạo ra những điều khiển chuẩn // define the crosshair tile layer and its required functionsvar crossLayer = new GTileLayer(new GCopyrightCollection(""), 0, 15);crossLayer.getTileUrl =  function(tile, zoom) {  return "./include/tile_crosshairs.png";}crossLayer.isPng = function() {return true;}// Create a new map type incorporating the tile layervar layerTerCross = [ G_PHYSICAL_MAP.getTileLayers()[0], crossLayer ];var mtTerCross = new GMapType(layerTerCross,  G_PHYSICAL_MAP.getProjection(), "Ter+");var map = new GMap2(document.getElementById("map_canvas"),   { size: new GSize(640,320) } );map.addMapType(G_PHYSICAL_MAP);map.addMapType(mtTerCross);map.setCenter(new GLatLng(37.4419, -122.1419), 4);var mapControl = new GHierarchicalMapTypeControl();// Set up map type menu relationshipsmapControl.clearRelationships();mapControl.addRelationship(G_SATELLITE_MAP, G_HYBRID_MAP, "Labels", false);mapControl.addRelationship(G_PHYSICAL_MAP, mtTerCross, "Crosshairs");// Add control after you've specified the relationshipsmap.addControl(mapControl);map.addControl(new GLargeMapControl()); Custom Map Controls (Điều khiển bản đồ tuỳ chọn) Google Map API cho phép cung tạo ra các điều khiển bản đồ tuỳ ý bằng lớp con Gcontrol. Để tạo ra 1 điều khiển khả dụng, bạn phải định nghĩa bộ xử lý cho ít nhât là 2 phương thức trong lớp initalize() và getDefaultPostition(). Phương thức initalize() phải trả giá trị DOM element. Trong khi phương thức getDefaultPosition() phải trả đối tượng có kiểu GcontrolPosition Trong ví dụ này ta tạo ra một điều khiển căn chỉnh kích thước đơn giản sử dụng các link ký tự chứ ko dùng các biểu tượng đồ hoạ giống như trong Google Map Hình 7: Điều khiển bản đồ tuỳ chọn function TextualZoomControl() {}// To "subclass" the GControl, we set the prototype object to// an instance of the GControl objectTextualZoomControl.prototype = new GControl();// Creates a one DIV for each of the buttons and places them in a container// DIV which is returned as our control element. We add the control to// to the map container and return the element for the map class to// position properly.TextualZoomControl.prototype.initialize = function(map) {  var container = document.createElement("div");  var zoomInDiv = document.createElement("div");  this.setButtonStyle_(zoomInDiv);  container.appendChild(zoomInDiv);  zoomInDiv.appendChild(document.createTextNode("Zoom In"));  GEvent.addDomListener(zoomInDiv, "click", function() {    map.zoomIn();  });  var zoomOutDiv = document.createElement("div");  this.setButtonStyle_(zoomOutDiv);  container.appendChild(zoomOutDiv);  zoomOutDiv.appendChild(document.createTextNode("Zoom Out"));  GEvent.addDomListener(zoomOutDiv, "click", function() {    map.zoomOut();  });  map.getContainer().appendChild(container);  return container;}// By default, the control will appear in the top left corner of the// map with 7 pixels of padding.TextualZoomControl.prototype.getDefaultPosition = function() {  return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));}// Sets the proper CSS for the given button element.TextualZoomControl.prototype.setButtonStyle_ = function(button) {  button.style.textDecoration = "underline";  button.style.color = "#0000cc";  button.style.backgroundColor = "white";  button.style.font = "small Arial";  button.style.border = "1px solid black";  button.style.padding = "2px";  button.style.marginBottom = "3px";  button.style.textAlign = "center";  button.style.width = "6em";  button.style.cursor = "pointer";}var map = new GMap2(document.getElementById("map"));map.addControl(new TextualZoomControl());map.setCenter(new GLatLng(37.441944, -122.141944), 13); Overlays(Phủ trên bản đồ) Map Overlays Overview(Tổng quan về việc phủ trên bản đồ) Hàm Overlay của Map Api có các kiểu sau : Các điểm trên bản đồ hiển thị khi ta sử dụng marker() và thường là hiển thị các biểu tượng. Marker là đối tượng của Gmaker() và được tạo khi sử dụng Gicon(). Các đoạn thẳng trên Gmap được hiển thị khi sử dụng polylines. Đoạn thẳng là đối tượng của Gpolyline(). Markers(Đánh dấu) Marker xác định các điểm trên bản đồ. Mặc định, marker được thể hiện bằng một biểu tượng là G_DEFAULT_ICON. Tuy nhiên, biểu tượng này có thể thay đổi. Hàm khởi tạo Gmarker sử dụng các đối tượng GlatLng và GmarkerOptions làm tham số. Marker là một đối tượng có thể tương tác được với các sự kiện. Ví dụ, ta có thể sử dụng sự kiện click chuột vào marker để hiển thị cửa số thông tin về vị trí hiện tại trên bản đồ. Hình 8: Đánh dấu 10 vị trí lên bản đồ var map = new GMap2(document.getElementById("map_canvas"));map.setCenter(new GLatLng(37.4419, -122.1419), 13); // Add 10 markers to the map at random locationsvar bounds = map.getBounds();var southWest = bounds.getSouthWest();var northEast = bounds.getNorthEast();var lngSpan = northEast.lng() - southWest.lng();var latSpan = northEast.lat() - southWest.lat();for (var i = 0; i < 10; i++) {  var point = new GLatLng(southWest.lat() + latSpan * Math.random(),        southWest.lng() + lngSpan * Math.random());map.addOverlay(new GMarker(point));} Draggable Markers (Di chuyển đánh dấu) Marker là đối tượng có thể tương tác và bấm hay di chuyển sang vị trí mới. Trong ví dụ dưới đây, ta sẽ đặt một marker trên bản đồ và xem cách xử lý một số sự kiện đơn giản của nó. Marker có thể di chuyển thực thi 4 loại sự kiện: click, dragstart, drag và dragend để chỉ ra trạng thái di chuyển của nó. Mặc định, các marker chỉ có thể click được chứ không di chuyển được, do vậy cần phải thiết đặt giá trị cho thuộc tính draggable là true. Hình 9: Di chuyển đánh dấu var map = new GMap2(document.getElementById("map_canvas"));var center = new GLatLng(37.4419, -122.1419);map.setCenter(center, 13);var marker = new GMarker(center, {draggable: true});GEvent.addListener(marker, "dragstart", function() {  map.closeInfoWindow();  });GEvent.addListener(marker, "dragend", function() {  marker.openInfoWindowHtml("Just bouncing along...");  });map.addOverlay(marker); Icons (Biểu tượng) Marker có thể tự định nghĩa ra một biểu tượng riêng thay thế cho biểu tượng mặc định. Định nghĩa ra một biểu tượng là việc rất phức tạp vì số lượng ảnh để tạo ra một biểu tượng đơn là khác nhau trong Map API. Tối thiểu, một biểu tượng cần phải xác định ra ảnh nền, kích thước của kiểu Gsize và offset của biểu tượng để xác định vị trí biểu tượng. Các biểu tượng đơn giản nhất đều dựa trên kiểu G_DEFAULT_ICON. Tạo ra một biểu tượng dựa trên kiểu này cho phép bạn thay đổi nhanh chóng biểu tượng mặc định bằng cách chỉ thay đổi một số ít các thuộc tính. Trong ví dụ dưới đây, ta tạo ra một biểu tượng sử dụng kiểu G_DEFAULT_ICON và sau đó sửa lại bằng cách sử dụng một hình ảnh khác var map = new GMap2(document.getElementById("map_canvas"));map.addControl(new GSmallMapControl());map.setCenter(new GLatLng(37.4419, -122.1419), 13);// Create our "tiny" marker iconvar blueIcon = new GIcon(G_DEFAULT_ICON);blueIcon.image = "";                // Set up our GMarkerOptions objectmarkerOptions = { icon:blueIcon };// Add 10 markers to the map at random locationsvar bounds = map.getBounds();var southWest = bounds.getSouthWest();var northEast = bounds.getNorthEast();var lngSpan = northEast.lng() - southWest.lng();var latSpan = northEast.lat() - southWest.lat();for (var i = 0; i < 10; i++) {  var point = new GLatLng(southWest.lat() + latSpan * Math.random(),    southWest.lng() + lngSpan * Math.random());  map.addOverlay(new GMarker(point, markerOptions));} Hầu hết các biểu tượng chứa một ảnh nền và một ảnh bóng. Ảnh bóng được tạo ra lệch 45 độ so với ảnh nền, góc dưới bên trái của ảnh bóng thẳng hàng với góc dưới bên trái của ảnh nền của biểu tượng. Ảnh bóng thường là ảnh 24 bit PNG với độ trong suốt alpha. Nhờ đó mà đường viền hình ảnh sẽ xuất hiện một cách chính xác trên bản đồ. Ví dụ dưới đây tạo ra một kiểu biểu tượng mới. Ta xác định ảnh nền, ảnh bóng và các điểm mà ta sẽ đặt biểu tượng vào bản đồ đồng thời xác định cả vị trí cửa sổ thông tin đi kèm theo biểu tượng. Hình 10: Biểu tượng var map = new GMap2(document.getElementById("map"));map.addControl(new GSmallMapControl());map.addControl(new GMapTypeControl());map.setCenter(new GLatLng(37.4419, -122.1419), 13);// Create our "tiny" marker iconvar tinyIcon = new GIcon();tinyIcon.image = "";tinyIcon.shadow = "";tinyIcon.iconSize = new GSize(12, 20);tinyIcon.shadowSize = new GSize(22, 20);tinyIcon.iconAnchor = new GPoint(6, 20);tinyIcon.infoWindowAnchor = new GPoint(5, 1);// Set up our GMarkerOptions object literalmarkerOptions = { icon:tinyIcon };// Add 10 markers to the map at random locationsvar bounds = map.getBounds();var southWest = bounds.getSouthWest();