AJAXのお勉強

Googleマップ クリックイベント追加＠AJAX

Googleマップにクリックイベントを追加します。

GEvent.addListenerにて、追加を行います。
GEvent.addListener(マップオブジェクト,"click",メソッド)です。

以下では、東京駅を中心にマップを作成します。
東京駅にマーカーを設定します。

クリックイベントを追加して、メソッドを記述します。
overlayの時に、getTitleでタイトルを取得して、alert表示、
もしくは、位置をalert表示しています。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Googleマップ クリックイベント追加</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=****" type="text/javascript"></script>
<script type="text/javascript">
<!--

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

        //東京駅の位置
        var tokyoPoint = new GLatLng(35.681099, 139.767084);

        //東京駅を中心にマップ作成
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(tokyoPoint, 15);

        //東京駅にマーカー
        map.addOverlay(new GMarker(tokyoPoint,{"title":"東京駅"}));

        //マップにクリックイベント追加
        GEvent.addListener(map, "click", function(overlay, point) {
            if (overlay) {
                alert(overlay.getTitle() + "がクリックされました。")
            } else if (point) {
                alert(point.lat() + ":" + point.lng() + "地点がクリックされました。")
            }
        });
        
        //縮尺移動のコントロールを設置
        map.addControl(new GSmallMapControl());

    }
}

// -->
</script>
</head>
<body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 500px"></div>
</body>
</html>

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