ocgod's Blog

http://www.google.com/apis/maps/documentation/#Examples 顯示基本地圖： 地圖中心為(37.4419, -122.1419)

var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);

移動地圖： 此範例在兩秒鐘後會平滑的移動到下一個地點(37.4569, -122.1569) ps.若下一個地點不在地圖上則直接跳過去

var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
window.setTimeout(function(){
                    map.panTo(new GLatLng(37.4569, -122.1569));},1000);

增加控制鈕： 使用map.addControl， GSmallMapControl()移動地圖，GMapTypeControl()改變地圖型態

var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);

Event Listeners： 等待某事件發生 使用GEvent.addListener，需傳入使用的map、事件型態與需要執行的動作 (範例為移動地圖時重新抓取中心點寫到網頁上)

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);

(使用java script的方法寫入新的座標到網頁的這段中間)

<div id="message"></div>

開啟Info Window：

var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.openInfoWindow(map.getCenter(),document.createTextNode("Hello, world"));

Map Overlays： (範例為可視範圍內隨機十個點與五條線(道路))

var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13); 
// Add 10 markers in random locations on the map
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));}
// Add a polyline with five random points. Sort the points by
// longitude so that the line does not intersect itself.
var points = [];
for (var i = 0; i < 5; i++) {
  points.push(new GLatLng(southWest.lat() + latSpan * Math.random southWest.lng() + lngSpan * Math.random()));}
points.sort(function(p1, p2) {
              return p1.lng() - p2.lng();});
map.addOverlay(new GPolyline(points));

Click Handling： (Maker是唯一有支援click的overlay)

var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
GEvent.addListener(map, "click", function(marker, point) {
                                   if (marker) {
                                     map.removeOverlay(marker);  } 
                                   else {
                                     map.addOverlay(new GMarker(point));  }});