AJAXのお勉強

Googleマップ 周辺地図を表示＠AJAX

Googleマップ上に周辺地図を表示します。

showMapBlowupを使用します。
マップやマーカーなどで使用できます。

以下では、マップにクリックイベントを追加しています。
マーカクリック時に、showMapBlowupで周辺地図を表示しています。

overlayでは、showMapBlowup(ズームサイズ,マップタイプ)、
mapでは、showMapBlowup(位置,ズームサイズ,マップタイプ)です。


<!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マップ API 周辺地図を表示</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=*****" type="text/javascript"></script>
<script type="text/javascript">

//<![CDATA[

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

        //二条城の緯度、経度
        var point = new GLatLng(35.013253,135.750897);

        //GMap2生成
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(point, 14);

        //地図：map.setMapType(G_MAP_TYPE);
        //衛星写真と地図：map.setMapType(G_HYBRID_TYPE);

        //衛星写真モード
        map.setMapType(G_SATELLITE_TYPE);

        //地図、航空写真コントロール追加
        map.addControl(new GMapTypeControl());


        //縮尺、移動コントロール追加
        map.addControl(new GSmallMapControl());


        //マーカー
        map.addOverlay(new GMarker(point));

        //マップにクリックイベント追加
        GEvent.addListener(map, "click", function(overlay, point) {
            if (overlay) {
                //周辺地図を表示
                overlay.showMapBlowup(15);
            } else if (point) {
                map.showMapBlowup(point,15,G_SATELLITE_TYPE);
            }
        });
    }
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 400px; height: 400px"></div>
</body>
</html>

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