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

はじめに

このチュートリアルでは、マーカーが配置された Google マップを、カスタム HTML 要素を使ってウェブページに追加する方法を説明します。このチュートリアルでは、マーカーはアイオワ州オタムワにあります。

始める

マーカーが配置された 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>

HTML ページは独立している必要があるため、CSS コードをページに直接追加します。

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>
    <style>
      gmp-map {
        height: 100%;
      }
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps,marker"
      defer
    ></script>
  </head>
  <body>
    <!-- TODO: Add a map with markers. -->
  </body>
</html>

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

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

<gmp-map center="41.027748173921374, -92.41852445367961" zoom="13" map-id="DEMO_MAP_ID" style="height: 400px"></gmp-map>

これにより、アイオワ州オットムワを中心とした地図が作成されますが、まだマーカーはありません。

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

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

<gmp-map
  center="41.027748173921374, -92.41852445367961"
  zoom="13"
  map-id="DEMO_MAP_ID"
>
  <gmp-advanced-marker
    position="41.027748173921374, -92.41852445367961"
    title="Ottumwa, IA"
  ></gmp-advanced-marker>
</gmp-map>
index.html

上記のコードは、地図にマーカーを追加します。高度なマーカーを使用するにはマップ ID が必要です（DEMO_MAP_ID を使用できます）。

JSFiddle で完成済みサンプルをお試しください。

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

  • カスタム スタイルで地図をカスタマイズできます。
  • ウェブブラウザでデベロッパー ツール コンソールを使用すると、コードをテストして実行したり、エラーレポートを確認したり、コードの問題を解決したりできます。
  • 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>
    <style>
      gmp-map {
        height: 100%;
      }
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script type="module" src="./index.js"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps,marker&v=weekly"
      defer
    ></script>
  </head>
  <body>
    <gmp-map
      center="41.027748173921374, -92.41852445367961"
      zoom="13"
      map-id="DEMO_MAP_ID"
    >
      <gmp-advanced-marker
        position="41.027748173921374, -92.41852445367961"
        title="Ottumwa, IA"
      ></gmp-advanced-marker>
    </gmp-map>
  </body>
</html>
index.html