Google Maps API - 在地圖上新增標註

在 Google Maps 如果想要加上標記及視窗說明，這可以使用 GMarker 物件來加以實現。
<br />var myMap = new GMap2(document.getElementById("my_map"));<br />myMap.setCenter(new GLatLng(25.08532, 121.561498), 11);<br /> <br />var myMarker = new GMarker( new GLatLng(25.08532, 121.561498) );<br />myMap.addOverlay( myMarker );<br /><br />myMarker.openInfoWindowHtml( "這裡是台北市" );<br />
看範例所呈現的結果

var myMarker = new GMarker( new GLatLng(25.08532, 121.561498) ); 建立一個 GMarker 物件，設定位置在經度 25.08532，緯度 121.561498 的位置上。

GMap2.addOverlay(overlay) 將加疊層加入地圖中，這裡我們將新建立的 GMarker 加入地圖中。

GMarker.openInfoWindowHtml(content, opts?) 在標記圖示之上打開地圖訊息視窗。如果要關閉已打開的訊息視窗可以使用 GMarker.closeInfoWindow()。

在上面的範例中是否覺得陽春了點，再來看看下面這個範例，我們將針對加在地圖上的標記做些改變，並加入動作事件處理程序。
<br />var myMap = new GMap2(document.getElementById("my_map"));<br />myMap.setCenter(new GLatLng(25.08532, 121.561498), 11);<br /> <br />var myIcon = new GIcon();<br />//Icon 圖片 (必要)<br />myIcon.image = "http://ianjung.googlepages.com/ian_map_icon.png";<br />//Icon 左上角相對於 (必要)<br />myIcon.iconAnchor = new GPoint(-3, 13);<br />//訊息視窗相對於 Icon 左上角位置 (必要)<br />myIcon.infoWindowAnchor = new GPoint(-3, 12);<br />//Icon 尺寸<br />myIcon.iconSize = new GSize(70, 26);<br />//陰影圖片<br />myIcon.shadow = "http://ianjung.googlepages.com/ian_map_icon_shadow.png";<br />//陰影尺寸<br />myIcon.shadowSize = new GSize(70, 26);<br />//拖拽標記時視覺上垂直「上升」的距離離<br />myIcon.maxHeight = 20;<br /> <br />var myMarker = new GMarker( new GLatLng(25.08532, 121.561498), {icon:myIcon, draggable:true} );<br />myMap.addOverlay( myMarker );<br />myMarker.openInfoWindowHtml( "這裡是台北市" );<br /><br />//單擊事件 <br />GEvent.addListener(myMarker, "click", function(){<br /> myMarker.openInfoWindowHtml( "我被點擊了" );<br /> });<br />//開始拖拽事件<br />GEvent.addListener(myMarker, "dragstart", function(){<br /> myMarker.closeInfoWindow();<br /> });<br />//結束拖拽事件<br />GEvent.addListener(myMarker, "dragend", function(){<br /> myMarker.openInfoWindowHtml( "我被拖曳到這裡" );<br /> });<br />
看範例所呈現的結果

這裡介紹一個改變地圖上標記呈現相當重要的物件 GIcon，這可以讓我們建立屬於自己的圖示，使用在 GMarker 上。針對 GIcon 有許多屬性可加以設定，必須要注意 image、iconAnchor、infoWindowAnchor 這三個是必要屬性，如果省略將會照成執行上的錯誤。

var myMarker = new GMarker( new GLatLng(25.08532, 121.561498), {icon:myIcon, draggable:true} ); 在這範例中，建立 GMarker 物件多加了一個參數設定 GMarkerOptions，此為一個物件我們設定了兩個屬性。icon 指定所使用的圖示 GIcon；draggable 使用者是否可拖拽此標記，true 為可拖曳，默認值為 false。

GEvent 在 Google Maps API 中所有事件都是透過此來加以定義，包含地圖本身的事件處理，至於有那些事件可以使用必須參考每個物件中事件部分的說明。所以這範例我們透過 GEvent.addListener(source, event, handler)，針對 GMarker 註冊了三個事件處理程序，分別為 click、dragstart、dragend。

在之前的所有範例中可以發現經常出現的兩個物件，GLatLng 是以緯度和經度表示的地理座標點。GPoint 是以像素座標表示的地圖上的一點。這兩個物件為 Google Maps API 中定義地圖上座標的主要物件，在往後的教學範例中還會經常看見它們。

參考︰
‧class GMap2︰addOverlay(overlay)
‧class GMarker︰openInfoWindowHtml(content, opts?)、closeInfoWindow()
‧class GMarkerOptions
‧class GIcon
‧class GEvent︰addListener(source, event, handler)
‧class GLatLng
‧class GPoint


更多教學文件在此︰Google Maps API - 前言及目錄