Horn Network

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

GIcon

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

程式碼

執行範例

google.load("maps", "2.x");
google.setOnLoadCallback(initialize);

var map = null;
function initialize() {
	// 檢查瀏覽器是否可使用 Google Map API
	if ( GBrowserIsCompatible() ) {
        map = new google.maps.Map2(document.getElementById('map'));
		// 設定地圖中心點
		map.setCenter(new GLatLng(25.036772,121.520269), 12);

addSite(map,12,'中山',25.062361,121.526194,'台北市中山區林森北路511號',1);
addSite(map,13,'萬華',25.030000,121.490556,'台北市萬華區莒光路315號',2);
addSite(map,14,'古亭',25.020833,121.528611,'台北市中正區羅斯福路三段153號',3);

	} // if
	else {
		alert('您的瀏覽器不支援Google Map');
	} // else
}

function addSite(map, siteCode, siteDesc, lat, lng, address, type) {
	var icon=new GIcon();
	icon.image="images/"+type+".gif";
	icon.iconSize = new GSize(16,16);
	icon.iconAnchor = new GPoint(8,8);
	icon.infoWindowAnchor = new GPoint(8, 8);

	var mark = new GMarker(
		new GLatLng(lat,lng),
		{icon:icon, title:siteDesc}
		);
	map.addOverlay(mark);
	GEvent.addListener(mark, "click", function() {mark.openInfoWindowHtml('地址：'+address);});
}

Filed under:
Google Map by klcintw