AJAXのお勉強

Googleマップ 地図、航空写真の切り替え＠AJAX

地図と航空写真(サテライト)の切り替えを行います。

マップの設定は、以下のように行います。。
//衛星写真
map.setMapType(G_SATELLITE_TYPE);
//地図
map.setMapType(G_MAP_TYPE);
//衛星写真と地図
map.setMapType(G_HYBRID_TYPE);


切り替えコントロールは、以下を追加します。
map.addControl(new GMapTypeControl());


以下では、ナイアガラの滝を航空写真モードで表示しています。


<!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(43.07926225431698,-79.07588100783467);

            //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.addOverlay(new GMarker(point));
            
            //縮尺、移動コントロール追加
            map.addControl(new GSmallMapControl());
        }
    }

//]]>
</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.