衛星写真に切り替える

 ここで追加した行の「G_SATELLITE_TYPE」というのは文字通り「サテライト」モードにするもので、 ほかに「G_MAP_TYPE」(通常の地図モード)「G_HYBRID_TYPE」(デュアルモード)が設定可能です。

はじめに

 Google Maps(Google Local)のAPIを利用する方法を簡単に紹介しています。今回 は「衛星写真に切り替えるためのコントロールの追加方法と最初から衛星写真モード に設定する方法について」です。


切り替え可能にする

 前回に作成したコードに1行追加します。
<!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">
    <script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAJ2A-EncISppmZHF0oZq2MxSIqVgmEE7Z7jvRqG49DJtM7mV-6xQVluTrLna8DIEesDPeKpUSnejCaA" type="text/javascript"></script>
  </head>
  <body>
    <div id="map" style="width: 500px; height: 400px"></div>
    <script type="text/javascript">
    //<![CDATA[
    
    var map = new GMap(document.getElementById("map"));
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    map.centerAndZoom(new GPoint(135.3659722, 34.72072222), 4);
    
    function AddGMarker(objMap,nLatitude,nLongitude,strHtml)
    {
       var objPoint = new GPoint(nLatitude,nLongitude);
       var objMarker = new GMarker(objPoint);

       GEvent.addListener(objMarker,"click",function(){ objMarker.openInfoWindowHtml(strHtml); });
       objMap.addOverlay(objMarker);
    }

    AddGMarker(map,135.3659722,34.72072222,"甲子園駅");
    
    //]]>
    </script>
  </body>
</html>
 赤字が追加する部分です。
 太字の部分はAPI Keyです(人それぞれ異なる値です)。

 実際に動かすと地図の右上にタイプの選択欄が表示され、「サテライト」をクリックすると衛星写真 が表示されます。



始めから衛星写真モードに設定する

 作成したコードに1行追加します。
<!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">
    <script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAJ2A-EncISppmZHF0oZq2MxSIqVgmEE7Z7jvRqG49DJtM7mV-6xQVluTrLna8DIEesDPeKpUSnejCaA" type="text/javascript"></script>
  </head>
  <body>
    <div id="map" style="width: 500px; height: 400px"></div>
    <script type="text/javascript">
    //<![CDATA[
    
    var map = new GMap(document.getElementById("map"));
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    map.setMapType(G_SATELLITE_TYPE);
    map.centerAndZoom(new GPoint(135.3659722, 34.72072222), 4);
    
    function AddGMarker(objMap,nLatitude,nLongitude,strHtml)
    {
       var objPoint = new GPoint(nLatitude,nLongitude);
       var objMarker = new GMarker(objPoint);

       GEvent.addListener(objMarker,"click",function(){ objMarker.openInfoWindowHtml(strHtml); });
       objMap.addOverlay(objMarker);
    }

    AddGMarker(map,135.3659722,34.72072222,"甲子園駅");
    
    //]]>
    </script>
  </body>
</html>
 赤字が追加する部分です。
 太字の部分はAPI Keyです(人それぞれ異なる値です)。

 実際に動かすと最初から衛星写真の状態で地図が表示されます。




カテゴリー「GoogleマップAPI」 のエントリー