お知らせ: Google Maps Platform に間もなく新しい基本地図のスタイルが導入されます。このアップデートにより、デフォルトのカラーパレットが新しくなるほか、ピンが最新化され、地図のエクスペリエンスとユーザビリティが改善されます。すべての地図のスタイルは、2025 年 3 月に自動的に更新されます。ご利用の詳細およびいち早く使用する方法については、Google Maps Platform の新しい地図のスタイルをご覧ください。

このページは Cloud Translation API によって翻訳されました。

JavaScript を使用してマーカーが配置された Google マップを追加する

はじめに

このチュートリアルでは、マーカーが配置されたシンプルな Google マップをウェブページに追加する方法を説明します。HTML と CSS について初級から中級の知識があり、JavaScript についても若干の知識がある方に適しています。

このチュートリアルで作成する地図は次のとおりです。マーカーは、ウルル・カタ・ジュタ国立公園のウルル（エアーズロックとも呼ばれます）にあります。

始める

マーカーが配置された Google マップをウェブページ上に作成する際のステップは、次の 3 つです。

API キーを取得する
HTML ページを作成する
マーカー付きの地図を追加する

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

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

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

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

Google Cloud コンソールに移動します。
プロジェクトを作成または選択します。
[続行] をクリックして、API と関連サービスを有効にします。
[認証情報] ページで API キーを取得します（API キーの制限も設定します）。制限のない既存の API キーまたはブラウザの制限が設定されたキーがある場合は、そのキーを使用することもできます。
割り当ての盗用を防ぎ、API キーを保護する方法については、API キーの使用をご覧ください。
課金を有効化します。詳細については、使用量と課金をご覧ください。

API キーを取得したら、[YOUR_API_KEY] をクリックして、次のスニペットに追加します。ご自身のウェブページで使用するブートローダスクリプトタグをコピーして貼り付けます。

<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

ステップ 2: HTML ページを作成する

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

<!doctype html>
<!--
 @license
 Copyright 2019 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->
<html>
  <head>
    <title>Add Map</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
  </body>
</html>
index.html

これは、見出しレベル 3（h3）と単一の div 要素で構成されるごく基本的なページです。ウェブページには任意のコンテンツを追加することができます。

コードを理解する

この例のこの段階では、次のようになっています。

!DOCTYPE html 宣言を使用して、アプリケーションを HTML5 として宣言しました。
地図を保持する「map」という名前の div 要素を作成しました。
ブートストラップローダを使用して Maps JavaScript API を読み込みました。

アプリケーションを HTML5 として宣言する

ウェブアプリケーション内で真の DOCTYPE を宣言することをおすすめします。このサンプルでは、下に示すようにシンプルな HTML5 DOCTYPE を使用して、アプリケーションを HTML5 として宣言しています。

<!DOCTYPE html>

最新のブラウザの大半は、この DOCTYPE で宣言されたコンテンツを「標準モード」でレンダリングします。これは、アプリケーションがより多くのブラウザに対応していることを意味します。DOCTYPE は、スムーズなデグレードも可能にしています。つまり、これを認識しないブラウザはこれを無視し、「後方互換モード」を使用してそのコンテンツを表示します。

後方互換モードで動作する一部の CSS は、標準モードでは有効ではありません。特に、パーセントベースのサイズは親ブロック要素から継承する必要があり、いずれかの祖先でサイズの指定に失敗すると、0×0 ピクセルのサイズとみなされます。この理由から、次の style 宣言を含めています。

<style>
  #map {
    height: 100%;
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>

div 要素を作成する

地図をウェブページ上に表示するには、地図用の場所を確保する必要があります。通常、これは名前付きの div 要素を作成して、ブラウザのドキュメントオブジェクトモデル（DOM）内でこの要素への参照を取得することで行います。

以下のコードでは、Google マップのページ領域を定義します。

<!--The div element for the map -->
<div id="map"></div>

チュートリアルのこの段階では、地図がまだ追加されていないため、div はグレーブロックとして表示されます。以下のコードは、div のサイズと色を設定する CSS を記述しています。

/* Set the size of the div element that contains the map */
#map {
    height: 400px; /* The height is 400 pixels */
    width: 100%; /* The width is the width of the web page */
}

上記のコードでは、style 要素で地図の div サイズを設定しています。地図を表示するには、div の幅と高さを 0 ピクセルより大きい値に設定してください。この例では、div の高さが 400 ピクセル、幅が 100% に設定されており、ウェブページの幅いっぱいに表示されます。通常、div は含んでいる要素から幅を取得しますが、div が空の場合に高さは 0 になります。この理由から、div の高さは常に明示的に設定する必要があります。

Maps JavaScript API を読み込む

ブートストラップローダーにより、Maps JavaScript API の読み込みが準備されます（importLibrary() が呼び出されるまでライブラリは読み込まれません）。

<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

独自の API キーを取得する方法については、ステップ 3: API キーを取得するをご覧ください。

ステップ 3: マーカーが配置された地図を追加する

このセクションでは、Maps JavaScript API をウェブページに読み込む方法と、この API を使用してマーカーが配置された地図を追加する独自の JavaScript を記述する方法について説明します。

TypeScript

// Initialize and add the map
let map;
async function initMap(): Promise<void> {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };

  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  // The map, centered at Uluru
  map = new Map(
    document.getElementById('map') as HTMLElement,
    {
      zoom: 4,
      center: position,
      mapId: 'DEMO_MAP_ID',
    }
  );

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: 'Uluru'
  });
}

initMap();index.ts

JavaScript

// Initialize and add the map
let map;

async function initMap() {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };
  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  // The map, centered at Uluru
  map = new Map(document.getElementById("map"), {
    zoom: 4,
    center: position,
    mapId: "DEMO_MAP_ID",
  });

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: "Uluru",
  });
}

initMap();index.js

上記のコードでは、initMap() 関数が呼び出されると、Map ライブラリと AdvancedMarkerElement ライブラリが読み込まれます。

コードを理解する

チュートリアルのこの段階では、次のようになっています。

div 内に地図を作成する JavaScript 関数を定義しました。
AdvancedMarkerElement を作成して、地図にマーカーを追加しました。

地図を追加する

以下のコードでは、新しい Google マップオブジェクトが作成され、中心とズームレベルを含むプロパティが地図に追加されます。その他のプロパティオプションについては、ドキュメントをご覧ください。

TypeScript

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };

// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

// The map, centered at Uluru
map = new Map(
  document.getElementById('map') as HTMLElement,
  {
    zoom: 4,
    center: position,
    mapId: 'DEMO_MAP_ID',
  }
);index.ts

JavaScript

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };
// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

// The map, centered at Uluru
map = new Map(document.getElementById("map"), {
  zoom: 4,
  center: position,
  mapId: "DEMO_MAP_ID",
});
index.js

すべての地図には、center と zoom の 2 つの必須オプションがあります。上記のコードでは、new Map() によって新しい Google マップオブジェクトが作成されます。center プロパティは、地図の中心位置を API に指示します。

zoom プロパティでは、地図のズームレベルを指定します。0 は最小ズームレベルで、Earth 全体を表示します。より高解像度で Earth にズームインするには、ズームレベルにより大きい値を設定します。

地球全体の地図を単一の画像として指定すると、巨大な地図か、非常に低い解像度の小さな地図となってしまいます。そのため、Google マップおよび Maps JavaScript API 内の地図画像は、複数の地図タイルに分割され、複数のズームレベルで提供されます。低ズームレベルでは、少数の地図タイルのセットで広範囲をカバーし、高ズームレベルでは、高解像度のタイルで狭い範囲をカバーします。次のリストは、各ズームレベルで表示されるおおよその詳細度を示しています。

1: 世界
5: 陸地または大陸
10: 都市
15: 通り
20: 建物

次の 3 つの画像は、東京の同じ場所をそれぞれズームレベル 0、7、18 で表示したものです。

マーカーを追加する

以下のコードで、地図上にマーカーを配置します。position プロパティは、マーカーの位置を設定します。

TypeScript

// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
  map: map,
  position: position,
  title: 'Uluru'
});index.ts

JavaScript

// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
  map: map,
  position: position,
  title: "Uluru",
});index.js

コードサンプルの全文

サンプルコード全体はこちらをご覧ください。

TypeScript

// Initialize and add the map
let map;
async function initMap(): Promise<void> {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };

  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  // The map, centered at Uluru
  map = new Map(
    document.getElementById('map') as HTMLElement,
    {
      zoom: 4,
      center: position,
      mapId: 'DEMO_MAP_ID',
    }
  );

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: 'Uluru'
  });
}

initMap();index.ts

JavaScript

// Initialize and add the map
let map;

async function initMap() {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };
  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  // The map, centered at Uluru
  map = new Map(document.getElementById("map"), {
    zoom: 4,
    center: position,
    mapId: "DEMO_MAP_ID",
  });

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: "Uluru",
  });
}

initMap();index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
style.css

HTML

<html>
  <head>
    <title>Add Map</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
  </body>
</html>index.html

サンプルを試す

JSFiddle.net Google Cloud Shell

マーカーについて詳しくは、次の記事をご覧ください。

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

詳しくは、緯度と経度の座標を取得する方法、または住所を地理座標に変換する方法をご覧ください。
スタイルやプロパティなどのオプションを微調整して、地図をカスタマイズできます。地図のカスタマイズについて詳しくは、スタイルと地図上への図形描画に関するガイドをご覧ください。
ウェブブラウザでデベロッパーツールコンソールを使用すると、コードをテストして実行したり、エラーレポートを確認したり、コードの問題を解決したりできます。
Chrome でコンソールを開くには、キーボードショートカットを使用します。
Mac の場合は Command+Option+J キー、Windows の場合は Ctrl+Shift+J キーです。
Google マップ上のビジネス拠点の緯度と経度の座標を取得する手順は次のとおりです。
1. ブラウザで Google マップを開きます。
2. 地図上で、座標が必要な場所の正確な位置を右クリックします。
3. 表示されるコンテキストメニューから [この場所について] を選択します。地図画面の下部にカードが表示されます。カードの最後の行で緯度と経度の座標を確認します。
ジオコーディングサービスを使用すると、住所を緯度と経度の座標に変換できます。デベロッパーガイドで、ジオコーディングサービスの利用方法について詳しく説明しています。