AJAXのお勉強

Googleマップ イベントを発生させる＠AJAX

GEvent.triggerにより、イベントを発生させることができます。
マップ外のサイドバーを設置して、マップのイベントを発生させることができます。

GEvent.trigger(オブジェクト,イベント名,パラメータ)
により、イベントを発生することができます。

以下では、マーカーを二つ作成します。
マーカーには、クリックイベントを追加し、
駅名を表示する吹き出しを作成します。

divタグを配置して、
その中に、クリックイベントを発生させるaタグを設置します。
クリックしたら、GEvent.triggerにより、
マーカーのクリックイベントを発生させます。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Googleマップ イベントを発生させる</title>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2.x&key=****"></script>
<script type="text/javascript">

//<![CDATA[

var marker;

function load() {
    if (GBrowserIsCompatible()) {

        //位置を二つ作成
        var points = new Array();
        points[0] = new GLatLng(35.681099, 139.767084);
        points[1] = new GLatLng(35.69169, 139.770883);

        //Gmap2生成
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(points[0], 14);

        
        //マーカーを二つ作成
        marker = new Array();

        marker[0] = new GMarker(points[0])
        map.addOverlay(marker[0]);

        marker[1] = new GMarker(points[1])
        map.addOverlay(marker[1]);

        //マーカーにイベント追加
        GEvent.addListener(marker[0], "click", function() {
            marker[0].openInfoWindowHtml("<div>東京駅</div>");
        });
        
        GEvent.addListener(marker[1], "click", function() {
            marker[1].openInfoWindowHtml("<div>神田駅</div>");
        });
    }
}

//イベント発生させるメソッド
function openInfo(i) {
     GEvent.trigger(marker[i], "click", null);
}

//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 400px; height: 400px"></div>
    <BR>
    <div>
        <a href="#" onclick="openInfo(0)">東京駅</a><BR>
        <a href="#" onclick="openInfo(1)">神田駅</a><BR>    
    </div>
</body>
</html>

Copyright (C) 2008 AJAXのお勉強. All Rights Reserved.