GoogleマップV3のシンプルな例

簡易サンプル
GoogleマップV3（本名：The Google Maps API V3）は、こんな感じのソースで動きます。

  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript">
    window.onload = initialize;
    function initialize() {
      var myOptions = {
        zoom: 8,
        center: new google.maps.LatLng(35.5, 140.0),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    }
  </script>
これまで扱いが面倒だったAPIキーが必要なくなり、setCenterなども初期化時に設定するようになりました。

JavaScriptファイル呼び出し時にsensor=falseを指定しています。これはiPhone等の位置情報を指定できる端末から見る場合にtrueを設定するとか。とりあえず今回はブラウザで見る用なのでfalse。

myOptionsで渡している引数はzoomとcenterは、見たまんまの意味です。

mapTypeIdは、地図のタイプをROADMAP、SATELLITE、HYBRID、TERRAINが選べます。
http://code.google.com/intl/ja/apis/maps/documentation/v3/introduction.html#MapOptions

google.maps.MapTypeId.ROADMAP

google.maps.MapTypeId.SATELLITE

google.maps.MapTypeId.HYBRID

google.maps.MapTypeId.TERRAIN
全体のソース
こんな感じに書けばマップが表示されます。 

  <html>
    <head>
      <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
      <script type="text/javascript">
        window.onload = initialize;
        function initialize() {
          var myOptions = {
            zoom: 8,
            center: new google.maps.LatLng(35.5, 140.0),
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        }
      </script>
      <title>GoogleマップV3のシンプルな例</title>
    </head>

    <body>
      <div id="map_canvas" style="width:600px; height:200px;"></div>
    </body>
  </html>
このソースを表示
戻る    ご意見、ご要望