マーカーが配置された Google マップを HTML を使って追加する

はじめに

このチュートリアルでは、マーカーが配置された Google マップを、カスタム HTML 要素を使ってウェブページに追加する方法を説明します。このチュートリアルでは、2 つのマーカーが（1 つはカリフォルニア州マウンテンビューに、もう 1 つはワシントン州シアトルに）配置されている地図を作成します。

始める

マーカーが配置された Google マップを、HTML を使ってウェブページに追加する手順は次のとおりです。

  1. API キーを取得する
  2. HTML、CSS、JS を作成する
  3. 地図を追加する
  4. マーカーを追加する

この作業には、ウェブブラウザが必要です。使用するプラットフォームに応じて、対応しているブラウザのリストから、Google Chrome（推奨）、Firefox、Safari、Edge などのよく知られたブラウザを選択します。

ステップ 1: API キーを取得する

このセクションでは、独自の API キーを使用して、Maps JavaScript API に対してアプリを認証する方法について説明します。

次のステップに沿って、API キーを取得します。

  1. Google Cloud コンソールに移動します。

  2. プロジェクトを作成または選択します。

  3. [続行] をクリックして、API と関連サービスを有効にします。

  4. [認証情報] ページで API キーを取得します（API キーの制限も設定します）。制限のない既存の API キーまたはブラウザの制限が設定されたキーがある場合は、そのキーを使用することもできます。

  5. 割り当ての盗用を防ぎ、API キーを保護する方法については、API キーの使用をご覧ください。

  6. 課金を有効化します。詳細については、使用量と課金をご覧ください。

  7. これで API キーを使用できるようになりました。

ステップ 2: HTML、CSS、JS を作成する

基本的な HTML ウェブページのコードを次に示します。

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>

    <!-- TODO: Add bootstrap script tag. -->
  </head>
  <body>
    <!-- TODO: Add a map with markers. -->
  </body>
</html>

地図を読み込むには、次のスニペットに示すように、Maps JavaScript API のブートストラップ ローダを含む script タグを追加（独自の API キーを追加）する必要があります。

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

ヒント: ご希望なら、JSFiddle で完成済みサンプルをお試しください。

ステップ 3: 地図を追加する

Google マップをページに追加するには、gmp-map HTML 要素をコピーして、HTML ページの body 内に貼り付けます。

<gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID" style="height: 400px"></gmp-map>

その結果、次のマップが作成されます。

サンノゼ大都市圏を中心とした地図が作成されました。

ステップ 4: マーカーを追加する

地図にマーカーを追加するには、gmp-advanced-marker HTML 要素を使用します。次のスニペットをコピーして、前の手順で追加した gmp-map 全体に貼り付けます。

<gmp-map
  center="43.4142989,-124.2301242"
  zoom="4"
  map-id="DEMO_MAP_ID"
  style="height: 400px"
>
  <gmp-advanced-marker
    position="37.4220656,-122.0840897"
    title="Mountain View, CA"
  ></gmp-advanced-marker>
  <gmp-advanced-marker
    position="47.648994,-122.3503845"
    title="Seattle, WA"
  ></gmp-advanced-marker>
</gmp-map>
index.html

上記のコードでは、2 つのマーカーを追加し、gmp-map の zoom パラメータと center パラメータを変更して、これらのマーカーを見やすくしています。高度なマーカーを使用するにはマップ ID が必要です（DEMO_MAP_ID を使用できます）。

ヒントとトラブルシューティング

  • カスタム スタイルで地図をカスタマイズできます。
  • ウェブブラウザでデベロッパー ツール コンソールを使用すると、コードをテストして実行したり、エラーレポートを確認したり、コードの問題を解決したりできます。
  • Chrome でコンソールを開くには、キーボード ショートカットを使用します。
    Mac の場合は Command+Option+J キー、Windows の場合は Ctrl+Shift+J キーです。

  • Google マップ上のビジネス拠点の緯度と経度の座標を取得する手順は次のとおりです。

    1. ブラウザで Google マップを開きます。
    2. 地図上で、座標が必要な場所の正確な位置を右クリックします。
    3. 表示されるコンテキスト メニューから [この場所について] を選択します。地図画面の下部にカードが表示されます。カードの最後の行で緯度と経度の座標を確認します。

  • ジオコーディング サービスを使用すると、住所を緯度と経度の座標に変換できます。デベロッパー ガイドで、ジオコーディング サービスの利用方法について詳しく説明しています。

完全なサンプルコード

以下は、このチュートリアルで作成した最終的な地図と、使用した完全なサンプルコードです。

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <gmp-map
      center="43.4142989,-124.2301242"
      zoom="4"
      map-id="DEMO_MAP_ID"
      style="height: 400px"
    >
      <gmp-advanced-marker
        position="37.4220656,-122.0840897"
        title="Mountain View, CA"
      ></gmp-advanced-marker>
      <gmp-advanced-marker
        position="47.648994,-122.3503845"
        title="Seattle, WA"
      ></gmp-advanced-marker>
    </gmp-map>

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&libraries=maps,marker&v=beta"
      defer
    ></script>
  </body>
</html>
index.html