Google Maps JavaScript API の使い方・仕様

更新：2026-04-30

久しぶりに Google Cloud の管理画面にてMaps関連APIを見てみると Maps JavaScript API は料金の記載がないことに気づいた。どうもこのAPI自体の課金はないが、それを利用する Places API などを使う場合は無料枠を超えると有料の模様。

その昔、Google Maps JavaScript API は無料で使えたが、のちに有料となった。 2018年時点では、1日あたり最大25,000回のマップロードが無料で、それ以上は有料だった。

現在の料金については公式サイト Google Maps Platform の料金体系を参照。

無料の地図としては Google Maps Embed API がある。できることは限られるが、それなりに使える。

ここでは Maps JavaScript API の現在の仕様のほか、昔の仕様もメモとして記録しておく。いくつかバージョンがあり、たまに仕様が変更されている。

Google Maps JavaScript API（2026年）

このJavaScript APIだけでも一応地図が表示できる。基本的に緯度・経度の指定による地図の表示のみ可能。

以下シンプルなサンプルコード。地図は <gmp-map></gmp-map> に表示される。

<script
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps,marker"
    defer></script>

<gmp-map
   center="35.6811673,139.7648629"
   zoom="15"
   map-id="DEMO_MAP_ID"
   style="height: 500px"></gmp-map>

「YOUR_API_KEY」は自分のAPIキーに置き換える。とりあえず、これだけで地図が表示できる。

center: 緯度・経度を指定する。
zoom: ズームレベル。数値が大きいほど地表に近くなる。

JavaScriptにはasyncを付けても一応動作する。

詳しくは Google for Developers の Google マップをウェブページに追加するを参照。

タイプ2

<gmp-map>タグを使わない方法もある。

地図は <div id="map"></div> に表示される。

<div id="map" style="width:100%;height:400px;"></div>

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

<script>
let map;
async function initMap() {
    const { Map, RenderingType } = (await google.maps.importLibrary('maps'));
    map = new Map(document.getElementById('map'), {
        center: { lat: 35.6811673, lng: 139.7648629 },
        zoom: 15,
        renderingType: RenderingType.VECTOR,
    });
}
</script>

「renderingType: RenderingType.VECTOR」がなくても表示可能。これがあると若干重い印象。

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と同じ。

はてな

Bluesky

カテゴリ