だめグラマーの独り言

40過ぎのおっさんがWeb系プログラム関連のいろいろを多分に私見で綴るブログ

GoogleMap API V3

先月まで仕事でとあるページにGoogleMapを実装させていたのでソレにまつわるTipsをいろいろ

まずGoogleMapを表示させるには
headタグ内

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

headタグ内でgooglemapのAPIをロードします。
URL最後のfalseはPC向けページならfalse、スマホGPS搭載機向けページならtrueを使用します。(現在地表示ができるようになります)
標準的にjQueryと併用する方も多いので、jQueryAPI読み込みに記述して下さい。

JavaScript

<script type="text/javascript">
// jQuery書き出しのお約束
jQuery(function($) 
{
  // すでにonload属性で何かJavaScriptが動いていたとしても
  // 気にせず地図表示させるためのページ表示イベントリスナー
  google.maps.event.addDomListener(window, 'load', function()
  {
    // 地図を表示させる位置(DIV)の取得
    var mapdiv = document.getElementById("map_canvas");

    // 表示する地図のオプション
    mapOptions = {
      zoom: 11, //地図の縮尺
      center: new google.maps.LatLng(xx.xxxx, yy.yyyy), 地図の中心地点(緯度と経度)
      mapTypeId: google.maps.MapTypeId.ROADMAP, 地図の種類(後述)
    };

    // 地図を所定の位置に書き出す呪文
    map = new google.maps.Map(mapdiv, mapOptions);
  });
});
</script>

地図を表示するだけならこれだけで表示できます。
地図の種類ですが、文末の「ROADMAP」を以下に書き換えるだけで、いろんなタイプの地図を表示することができます。

  • ROADMAP
    • デフォルトの2DMapを表示します。
  • SATELLITE
    • 空撮写真地図を表示します。
  • HYBRID
    • 空撮写真とデフォルトの地図レイヤを組み合わせて表示します。
  • TERRAIN
    • 等高線を引いたような地図を表示します。