Google Maps JavaScript API の使い方・仕様

その昔、Google Maps JavaScript API は無料で使えたが、のちに有料となった。 2018年現在、1日あたり最大25,000回のマップロードが無料で、それ以上は無料となっている。 詳しくは 価格とプラン に書かれている。 無料の地図としては Embed API があり、できることは限られるが、それなりに使える。

ここでは古い仕様のv3とv2をメモとして残しておく。

2018年

v3ではAPIキーなしで使えていたが、仕様が変わり、すべての地図APIはキーが必要となっている。 有料になってから使っていないので、公式サイトにもあるサンプルコードだけ記す。

<script>
function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 35.710139, lng: 139.810833},
        zoom: 8
    });
}
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

ドキュメントは Google Maps JavaScript API にある。

v3

2012年4月、Google Maps API v3 が最新版だった。 v3はパソコンだけでなく、スマートフォンやタブレットPCなどのモバイル端末でも快適に動作するように設計されている。

まず、APIを使う準備をする。 v2まではサイトごとに API key が必要だったが、v3 は必要ない。

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

引数 sensorは、位置情報取得にセンサーを使用するかどうかの指定。 trueは使用する、falseは使用しない。 使用しない場合でもfalseは指定しておく。 無指定はNG。 次に具体的に地図に関する処理を行う。

<script type="text/javascript">
    function initialize() {
        //緯度・経度
        var myLatlng = new google.maps.LatLng(35.710139, 139.810833);
        
        var myOptions = {
            zoom: 16,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        
        //キャンバス
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        
        //マーカー
        var marker = new google.maps.Marker({
            position: myLatlng, 
            map: map,
            title: "テスト"
        }); 
        
        //吹き出しのテキスト
        var contentString = '東京スカイツリー<br />2012年5月22日開業';
        
        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });
        
        infowindow.open(map, marker);
        
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map, marker);
        });
    }
</script>

以下、主な設定。

• 緯度・経度
  表示する中心座標の緯度・経度などを指定する。 zoomは0が最小で、数字を増やすとズームイン（拡大）、数字を減らすとズームアウト（縮小）。
• キャンバス
  地図を表示するキャンバスの設定。
• マーカー
  地図上に風船のようなアイコンを表示する。
• 吹き出しのテキスト
  マーカーから吹き出しでテキストを表示する。 吹き出し内のテキストはタグが使える。 google.maps.event.addListener(); は、マーカーをクリックすると吹き出しを表示するイベント。 infowindow.open(map, marker); で吹き出しを表示する。 google.maps.event.addListener(); の上の行にも infowindow.open(map, marker); があるのは、ページロード時に吹き出しを表示するため。

次に上記 JavaScript を実行する。

<script type="text/javascript">
initialize();
</script>

次に、地図を表示したい位置にタグを書く。 地図は id="map_canvas"（上記JavaScript内で指定したID）のタグ内に表示される。 地図の大きさはCSSなどでwidthとheightを指定する。

<div id="map_canvas" style="width:640px;height:480px"></div>

v2

基本的にv3と同じだが、APIキーが必要だった。

<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=YOUR_API_KEY">
</script>

key以外の引数はそのままで良い。 ただし、古いキーは既にサービス終了して取得できない。 次に具体的に地図に関する処理を行う。

<script type="text/javascript">
    function initialize() {
        //キャンバスと座標
        var map = new GMap2(document.getElementById("map_canvas"));
        var lat = 35.710139;//緯度
        var lng = 139.810833;//経度
        map.setCenter(new GLatLng(lat, lng), 16);
        
        //コントローラ
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        
        //マーカーとテキスト
        var center = new GLatLng(lat, lng);
        var marker = new GMarker(center, {clickable: true});
        var markerText = "東京スカイツリー<br />2012年5月22日開業";
        
        GEvent.addListener(marker, "click", function() {
            marker.openInfoWindowHtml(markerText);
        });
        
        map.addOverlay(marker);
        marker.openInfoWindowHtml(markerText);
    }
</script>

以下、主な設定。

• キャンバスと座標
  表示する中心座標の緯度・経度などを指定する。 map.setCenter(new GLatLng(緯度, 経度), ズームレベル); ズームレベルは0が最小で、数字を増やすとズームイン（拡大）、数字を減らすとズームアウト（縮小）。
• コントローラ
  GLargeMapControl() ： 地図の左に拡大・縮小、パンのボタン表示。 GMapTypeControl() ： 地図の右上に「地図」、「航空写真」などを表示。
• マーカーとテキスト
  地図上に風船のようなアイコンを表示する。 また、マーカーから吹き出しでテキストを表示する。 吹き出し内のテキストはタグが使える。 GEvent.addListener(); は、マーカーをクリックすると吹き出しを表示するイベント。 marker.openInfoWindowHtml(markerText); で吹き出しを表示する。 GEvent.addListener(); の外（最終行）にも marker.openInfoWindowHtml(markerText); があるのは、ページロード時に吹き出しを表示するため。

その他はv3と同じ。