透過GEvent，我們可以讓地圖上的物件與網頁元作互動，達到對使用者更友善的介面。

如本範例，當滑鼠移過(moveover)右側的站名方塊時地圖中對應的marker會變紅色，點(click)方塊時地圖會顯示訊息視窗。
若滑鼠移過(moveover)地圖中的marker相對應的站名方塊也會變黃底突顯。
當地圖內marker太多時這個技巧特別有用。

GEvent

• GEvent
  • .addListener
  • .trigger 觸發地圖內的事件

程式碼

執行範例

javascript

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

var map = null;
var arySite = new Array();

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,4,'新店',24.978889,121.529167,'台北縣新店市三民路36號',40,23,'懸浮微粒',0);
addSite(map,5,'土城',24.981667,121.451667,'台北縣土城市學府路一段241號',40,26,'懸浮微粒',0);
addSite(map,6,'板橋',25.012778,121.459167,'台北縣板橋市文化路一段25號',40,27,'懸浮微粒',0);
addSite(map,7,'新莊',25.034056,121.432583,'台北縣新莊市中正路510號',40,27,'臭氧',0);
addSite(map,8,'菜寮',25.064167,121.480556,'台北縣三重市中正北路135號',40,26,'懸浮微粒',0);
addSite(map,9,'林口',25.078333,121.368611,'台北縣林口鄉民治路25號',40,26,'臭氧',0);
addSite(map,10,'淡水',25.164694,121.449139,'台北縣淡水鎮中正東路42巷6號',40,21,'懸浮微粒',0);
addSite(map,11,'士林',25.105389,121.515139,'台北市北投區文林北路155號',40,37,'懸浮微粒',0);
addSite(map,12,'中山',25.062361,121.526194,'台北市中山區林森北路511號',40,28,'懸浮微粒',0);
addSite(map,13,'萬華',25.030000,121.490556,'台北市萬華區莒光路315號',40,22,'懸浮微粒',0);
addSite(map,14,'古亭',25.020833,121.528611,'台北市中正區羅斯福路三段153號',40,30,'懸浮微粒',0);
addSite(map,15,'松山',25.050833,121.578889,'台北市松山區八德路四段746號',40,23,'懸浮微粒',0);

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

function addSite(map, siteCode, siteDesc, lat, lng, address, type) {
	var icon=new GIcon();
	icon.image="images/1.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}
		);

	arySite[siteCode] = mark;
	map.addOverlay(mark);
	GEvent.addListener(mark, "click", function() {mark.openInfoWindowHtml('測站：'+siteDesc+'<br />地址：'+address);});
	GEvent.addListener(mark, "mouseover", function() {
		mark.setImage('images/1r.gif');
		document.getElementById('site'+siteCode).style.background='yellow';
		});
	GEvent.addListener(mark, "mouseout", function() {
		mark.setImage('images/1.gif');
		document.getElementById('site'+siteCode).style.background='white';
		});
}

html

<span class='site' id='site4'
	onclick='GEvent.trigger(arySite[4],"click")'
	onmouseover='GEvent.trigger(arySite[4],"mouseover")'
	onmouseout='GEvent.trigger(arySite[4],"mouseout")'>新店
</span>
<span class='site' id='site5' onclick='GEvent.trigger(arySite[5],"click")' onmouseover='GEvent.trigger(arySite[5],"mouseover")' onmouseout='GEvent.trigger(arySite[5],"mouseout")'>土城</span>
<span class='site' id='site6' onclick='GEvent.trigger(arySite[6],"click")' onmouseover='GEvent.trigger(arySite[6],"mouseover")' onmouseout='GEvent.trigger(arySite[6],"mouseout")'>板橋</span>
<span class='site' id='site7' onclick='GEvent.trigger(arySite[7],"click")' onmouseover='GEvent.trigger(arySite[7],"mouseover")' onmouseout='GEvent.trigger(arySite[7],"mouseout")'>新莊</span>
<span class='site' id='site8' onclick='GEvent.trigger(arySite[8],"click")' onmouseover='GEvent.trigger(arySite[8],"mouseover")' onmouseout='GEvent.trigger(arySite[8],"mouseout")'>菜寮</span>
<span class='site' id='site9' onclick='GEvent.trigger(arySite[9],"click")' onmouseover='GEvent.trigger(arySite[9],"mouseover")' onmouseout='GEvent.trigger(arySite[9],"mouseout")'>林口</span>
<span class='site' id='site10' onclick='GEvent.trigger(arySite[10],"click")' onmouseover='GEvent.trigger(arySite[10],"mouseover")' onmouseout='GEvent.trigger(arySite[10],"mouseout")'>淡水</span>
<span class='site' id='site11' onclick='GEvent.trigger(arySite[11],"click")' onmouseover='GEvent.trigger(arySite[11],"mouseover")' onmouseout='GEvent.trigger(arySite[11],"mouseout")'>士林</span>
<span class='site' id='site12' onclick='GEvent.trigger(arySite[12],"click")' onmouseover='GEvent.trigger(arySite[12],"mouseover")' onmouseout='GEvent.trigger(arySite[12],"mouseout")'>中山</span>
<span class='site' id='site13' onclick='GEvent.trigger(arySite[13],"click")' onmouseover='GEvent.trigger(arySite[13],"mouseover")' onmouseout='GEvent.trigger(arySite[13],"mouseout")'>萬華</span>
<span class='site' id='site14' onclick='GEvent.trigger(arySite[14],"click")' onmouseover='GEvent.trigger(arySite[14],"mouseover")' onmouseout='GEvent.trigger(arySite[14],"mouseout")'>古亭</span>
<span class='site' id='site15' onclick='GEvent.trigger(arySite[15],"click")' onmouseover='GEvent.trigger(arySite[15],"mouseover")' onmouseout='GEvent.trigger(arySite[15],"mouseout")'>松山</span>

參考資料：

• Esa’s Google Maps API experiments. ZMarker with color switching