[Google Map]自訂標籤圖示(GIcon)

資料來源：http://klcin.tw/net/google-map-gicon

如果我們能在地圖上標上加油站之類的圖示就能更直覺的表達訊息。

GIcon

• GIcon 標籤的圖示
  • .image 圖示的網址
  • .iconSize 大小，如 new GSize(16,16)
  • .iconAnchor 定位，如 new GPoint(8,8)
  • .infoWindowAnchor 訊息視窗定位，如 new GPoint(8, 8)
    若沒有指定會無法顯示訊息視窗

程式碼

執行範例

view sourceprint?

01.google.load("maps", "2.x");

02.google.setOnLoadCallback(initialize);

03. 

04.var map = null;

05.function initialize() {

06.// 檢查瀏覽器是否可使用 Google Map API

07.if ( GBrowserIsCompatible() ) {

08.map = new google.maps.Map2(document.getElementById('map'));

09.// 設定地圖中心點

10.map.setCenter(new GLatLng(25.036772,121.520269), 12);

11. 

12.addSite(map,12,'中山',25.062361,121.526194,'台北市中山區林森北路511號',1);

13.addSite(map,13,'萬華',25.030000,121.490556,'台北市萬華區莒光路315號',2);

14.addSite(map,14,'古亭',25.020833,121.528611,'台北市中正區羅斯福路三段153號',3);

15. 

16.} // if

17.else {

18.alert('您的瀏覽器不支援Google Map');

19.} // else

20.}

21. 

22.function addSite(map, siteCode, siteDesc, lat, lng, address, type) {

23.var icon=new GIcon();

24.icon.image="images/"+type+".gif";

25.icon.iconSize = new GSize(16,16);

26.icon.iconAnchor = new GPoint(8,8);

27.icon.infoWindowAnchor = new GPoint(8, 8);

28. 

29.var mark = new GMarker(

30.new GLatLng(lat,lng),

31.{icon:icon, title:siteDesc}

32.);

33.map.addOverlay(mark);

34.GEvent.addListener(mark, "click", function() {mark.openInfoWindowHtml('地址：'+address);});

35.}