Google Maps JavaScript API を利用してWebページ内にGoogle Mapを表示する

Google Maps JavaScript API を利用してWebページ内にGoogle Mapを表示するコードを紹介します。

概要

Webページ内にGoogle Mapの地図を埋め込んで表示したい場合があります。この記事では、Google Maps JavaScript API を利用してWebページ内にGoogle Mapを埋め込んで表示するコードを紹介します。

費用

Google Maps JavaScript API は Google Maps Embed API と異なり呼び出しごとに費用が発生します。2021年時点での単価は、1,000リクエストごとに$7の費用が発生します。なお、アカウント全体で、$200までは無料で利用できるため、Maps JavaScript API のみを利用する場合は、28,000回の呼び出しまでは費用は発生しません。

事前準備

Google Maps JavaScript API の有効化

Google Maps JavaScript APIを有効にする必要があります。こちらの記事の手順に従って Maps JavaScript API を有効にしてください。

Google Maps API キーの取得

Maps APIを呼び出すためのAPIキーを取得します。APIキーの取得手順はこちらの記事を参照してください。

プログラム例

Google Map を埋め込むHTMLファイルを作成します。

コード

下記のHTMLファイルを作成します。~
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
  <p>GoogleMap (JavaScript API) 埋め込みテスト</p>

  <script type="text/javascript">
    // Create the script tag, set the appropriate attributes
    var script = document.createElement('script');
    script.src = 'https://maps.googleapis.com/maps/api/js?key=(取得したAPIキー)&callback=initMap';
    script.async = true;

    // Attach your callback function to the `window` object
    window.initMap = function () {
      // JS API is loaded and available
      mapobj = new google.maps.Map(document.getElementById('map'), {
        center: { lat: 35.681263, lng: 139.767937 },
        zoom: 15
      });
    };

    // Append the 'script' element to 'head'
    document.head.appendChild(script);
  </script>

  <div style="width:640px;height:320px;" id="map"></div>

</body>
</html>

解説

JavaScript部分のコードは次の通りです。

Maps JavaScreipt API のスクリプトを読み込むコードです。非同期で読み込む記述になっています。

    var script = document.createElement('script');
    script.src = 'https://maps.googleapis.com/maps/api/js?key=(取得したAPIキー)&callback=initMap';
    script.async = true;

Maps JavaScreipt API のスクリプトが非同期で読み込まれるため、スクリプトの読み込みの完了を検出するための完了イベントを用意する必要があります。下記のコードがMap JavaScript APIの読み込み完了イベントになります。
イベント内にMaps JavaScript API が読み込み完了した際に実行する処理を記述します。

    window.initMap = function () {
      /* Maps JavaScript API が読み込み完了した際に実行する処理を記述 */
    };

スクリプトタグをHEADタグに追加します。

    document.head.appendChild(script);

window.initMapのMaps JavaScript API の読み込み完了イベントには以下のコードを記述します。
mapオブジェクトを作成します。new google.maps.Map() でmapオブジェクトを作成します。コンストラクタの第一引数に、表示する要素のDOMオブジェクトを与えます。第二引数に、地図の表示範囲の緯度経度やズーム値を設定するオブジェクトを与えています。

      mapobj = new google.maps.Map(document.getElementById('map'), {
        center: { lat: 35.681263, lng: 139.767937 },
        zoom: 15
      });

ページの地図表示する枠としてdivタグの枠を記述します。style属性で枠の幅、高さを指定して枠の大きさを設定しています。

 <div style="width:640px;height:320px;" id="map"></div>

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。ページ内にGoogle Mapの地図が表示されることが確認できます。

Maps Javascript APIを利用してWebページ内に地図を表示できました。

このページのキーワード

Google Maps JS API を利用してWebページ内にGoogle Mapを表示する

著者

ジョニー

iPentecのプログラマー、最近はAIの積極的な活用にも取り組み中。
とっても恥ずかしがり。

掲載日: 2021-08-19

目次