地図を埋め込む

このガイドでは、インタラクティブな地図をウェブページに埋め込む方法について説明します。

Maps Embed API URL を作成する

Maps Embed API を読み込む URL の例を次に示します。

https://www.google.com/maps/embed/v1/MAP_MODE?key=YOUR_API_KEY&PARAMETERS

次のように置き換えます。

• MAP_MODE: 地図モード。
• YOUR_API_KEY は実際の API キーに置き換えてください。詳細については、API キーを取得するをご覧ください。
• PARAMETERS: 地図モードの必須パラメータとオプション パラメータ。

URL を iframe に追加する

ウェブページで Maps Embed API を使用するには、作成した URL を iframe の src 属性の値として設定します。地図のサイズは、iframe の height 属性と width 属性で制御します。次に例を示します。

<iframe
  width="450"
  height="250"
  frameborder="0" style="border:0"
  referrerpolicy="strict-origin-when-cross-origin"
  src="https://www.google.com/maps/embed/v1/MAP_MODE?key=YOUR_API_KEY&PARAMETERS"
  allowfullscreen>
</iframe>

上記の iframe のサンプルでは、次の追加プロパティを使用しています。

• allowfullscreen プロパティ。地図の特定の部分を全画面表示にできるようにします。
• frameborder="0" プロパティと style="border:0" プロパティ。地図の周囲から標準の iframe 枠線を削除します。
• referrerpolicy="strict-origin-when-cross-origin" プロパティを使用すると、ブラウザはウェブサイトのドメインを Referer ヘッダーとして Google に送信します。これにより、API キーの制限でリクエストを検証しながら、特定のページパスを非公開にできます。

iframe のサイズは、ウェブサイトの構造やデザインに合わせて変更できますが、通常は、地図が大きいほどユーザーが操作しやすくなります。埋め込み地図は、いずれかのサイズが 200 ピクセル未満の場合はサポートされません。

リファラー情報と API キーの制限

ホスティング ウェブサイトの referrer メタタグが no-referrer または same-origin に設定されている場合、ブラウザは Referer ヘッダーを Google に送信しません。これにより、API キーの制限によってリクエストが拒否される可能性があります。制限が適切に機能するようにするには、上記の例のように、iframe に referrerpolicy プロパティを追加して、Referer ヘッダーを Google に送信することを明示的に許可します。

• strict-origin-when-cross-origin（推奨）: ベースドメイン（例: https://example.com/）のみを Google に送信します。これにより、特定のページパスを非公開にしながら、API キーの制限を機能させることができます。
• no-referrer-when-downgrade（従来版）: 特定のページパスやクエリ パラメータを含む URL 全体を送信します（例: https://example.com/contact?user=123）。

Referrer-Policy ヘッダーの詳細

地図モードを選択する

リクエスト URL で使用する地図モードとして、次のいずれかを指定できます。

• place: 特定の場所または住所（ランドマーク、ビジネス、地理的特徴、町など）に地図のピンを表示します。
• view: マーカーやルートのない地図を返します。
• directions: 地図上で指定された 2 つ以上の地点間の経路、距離、移動時間を表示します。
• streetview: 指定した場所のインタラクティブなパノラマビューを表示します。
• search: 表示されている地図の領域全体を対象とした検索結果を表示します。

place モード

次の URL では、place 地図モードを使用して、エッフェル塔に地図マーカーを表示しています。

https://www.google.com/maps/embed/v1/place
  ?key=YOUR_API_KEY
  &q=Eiffel+Tower,Paris+France

以下のパラメータを使用できます。

パラメータ	型	説明	有効な値
q	必須	地図マーカーの位置を定義します。	URL エスケープされた場所の名前、住所、Plus Code、またはプレイス ID。 Maps Embed API では、スペースをエスケープする際に + と %20 の両方がサポートされます。たとえば、「City Hall, New York, NY」を City+Hall,New+York,NY に変換したり、Plus Codes「849VCWC8+R9」を 849VCWC8%2BR9 に変換したりします。
center	省略可	地図ビューの中心を定義します。	カンマ区切りの緯度と経度の値を受け入れます（例: 37.4218,-122.0840）。
zoom	省略可	地図の初期ズームレベルを設定します。	0（全世界）から 21（個々の建物）までの値。上限は、選択した場所で利用可能な地図データによって異なります。
maptype	省略可	読み込む地図タイルのタイプを定義します。	roadmap（デフォルト）または satellite
language	省略可	UI 要素と地図タイルのラベル表示に使用する言語を定義します。デフォルトでは、訪問者には自分の言語で地図が表示されます。このパラメータは、一部の国のタイルでのみサポートされています。リクエストされた特定の言語がタイルセットでサポートされていない場合は、そのタイルセットのデフォルトの言語が使用されます。
region	省略可	地政学的な配慮に基づいて、表示する適切な境界とラベルを定義します。	よく使用される ccTLD（「トップレベル ドメイン」）の 2 文字の値にマッピングされる 2 文字（数値ではない）の Unicode 地域サブタグとして指定された地域コードを受け入れます。サポートされている地域は、Google Maps Platform のサポート状況でご確認いただけます。

view モード

次の例では、view モードとオプションの maptype パラメータを使用して、地図の航空写真を表示します。

https://www.google.com/maps/embed/v1/view
  ?key=YOUR_API_KEY
  &center=-33.8569,151.2152
  &zoom=18
  &maptype=satellite

以下のパラメータを使用できます。

パラメータ	型	説明	有効な値
center	必須	地図ビューの中心を定義します。	カンマ区切りの緯度と経度の値を受け入れます（例: 37.4218,-122.0840）。
zoom	省略可	地図の初期ズームレベルを設定します。	0（全世界）から 21（個々の建物）までの値。上限は、選択した場所で利用可能な地図データによって異なります。
maptype	省略可	読み込む地図タイルのタイプを定義します。	roadmap（デフォルト）または satellite
language	省略可	UI 要素と地図タイルのラベル表示に使用する言語を定義します。デフォルトでは、訪問者には自分の言語で地図が表示されます。このパラメータは、一部の国のタイルでのみサポートされています。リクエストされた特定の言語がタイルセットでサポートされていない場合は、そのタイルセットのデフォルトの言語が使用されます。
region	省略可	地政学的な配慮に基づいて、表示する適切な境界とラベルを定義します。	よく使用される ccTLD（「トップレベル ドメイン」）の 2 文字の値にマッピングされる 2 文字（数値ではない）の Unicode 地域サブタグとして指定された地域コードを受け入れます。サポートされている地域は、Google Maps Platform のサポート状況でご確認いただけます。

directions モード

次の例では、directions モードを使用して、ノルウェーのオスロとテレマーク間の経路、距離、移動時間を表示します。有料道路と高速道路は避けています。

https://www.google.com/maps/embed/v1/directions
  ?key=YOUR_API_KEY
  &origin=Oslo+Norway
  &destination=Telemark+Norway
  &avoid=tolls|highways

以下のパラメータを使用できます。

パラメータ	型	説明	有効な値
origin	必須	ルートを表示する際の出発地を定義します。	URL エスケープされた場所の名前、住所、Plus Code、緯度/経度座標、またはプレイス ID。Maps Embed API では、スペースをエスケープする際に + と %20 の両方がサポートされます。たとえば、「City Hall, New York, NY」を City+Hall,New+York,NY に変換したり、Plus Codes「849VCWC8+R9」を 849VCWC8%2BR9 に変換したりします。
destination	必須	経路の終点を定義します。	URL エスケープされた場所の名前、住所、Plus Code、緯度/経度座標、またはプレイス ID。Maps Embed API では、スペースをエスケープする際に + と %20 の両方がサポートされます。たとえば、「City Hall, New York, NY」を City+Hall,New+York,NY に変換したり、Plus Codes「849VCWC8+R9」を 849VCWC8%2BR9 に変換したりします。
waypoints	省略可	出発地と目的地の間のルートを案内する 1 つ以上の中間地点を指定します。	場所の名前、住所、またはプレイス ID。 複数のウェイポイントを指定するには、パイプ文字（|）を使用して場所を区切ります（例: Berlin,Germany|Paris,France）。指定できるウェイポイントは 20 個までです。
mode	省略可	移動方法を定義します。モードが指定されていない場合、Maps Embed API は、指定されたルートに最も関連性の高いモードを 1 つ以上表示します。	driving、walking（歩行者専用道路や歩道がある場合はそれらを優先）、bicycling（自転車専用道路や優先道路がある場合はそれらを優先）、transit、flying。
avoid	省略可	経路で回避する対象を指定します。なお、このパラメータを指定しても、制限された対象物を含むルートが除外されるわけではありません。より好ましいルートが優先されるようになります。	tolls、ferries、highways。 複数の値を指定する場合は、パイプ文字（例: avoid=tolls|highways）で区切ります。
units	省略可	結果に距離を表示する際の測定方法（メートル法またはヤードポンド法）を指定します。units が指定されていない場合、クエリの origin 国によって使用する単位が決まります。	metric または imperial
center	省略可	地図ビューの中心を定義します。	カンマ区切りの緯度と経度の値を受け入れます（例: 37.4218,-122.0840）。
zoom	省略可	地図の初期ズームレベルを設定します。	0（全世界）から 21（個々の建物）までの値。上限は、選択した場所で利用可能な地図データによって異なります。
maptype	省略可	読み込む地図タイルのタイプを定義します。	roadmap（デフォルト）または satellite
language	省略可	UI 要素と地図タイルのラベル表示に使用する言語を定義します。デフォルトでは、訪問者には自分の言語で地図が表示されます。このパラメータは、一部の国のタイルでのみサポートされています。リクエストされた特定の言語がタイルセットでサポートされていない場合は、そのタイルセットのデフォルトの言語が使用されます。
region	省略可	地政学的な配慮に基づいて、表示する適切な境界とラベルを定義します。	よく使用される ccTLD（「トップレベル ドメイン」）の 2 文字の値にマッピングされる 2 文字（数値ではない）の Unicode 地域サブタグとして指定された地域コードを受け入れます。サポートされている地域は、Google Maps Platform のサポート状況でご確認いただけます。

streetview モード

Maps Embed API を使用すると、対象地域全体について、指定された場所からのインタラクティブなパノラマとしてストリートビュー画像を表示できます。ユーザーが投稿したフォトスフィアやストリートビューのスペシャル コレクションも利用できます。

各ストリートビュー パノラマは、単一地点からの 360 度ビューを提供します。画像には、360 度の水平ビュー（周囲全体）と 180 度の垂直ビュー（真上から真下）が含まれています。streetview モードでは、カメラが中央に配置された、パノラマ画像を球体としてレンダリングするビューアを提供します。カメラを操作して、ズームやカメラの向きを制御できます。

次の streetview モードのパノラマをご覧ください。

https://www.google.com/maps/embed/v1/streetview
  ?key=YOUR_API_KEY
  &location=46.414382,10.013988
  &heading=210
  &pitch=10
  &fov=35

次のいずれかの URL パラメータが必須です。

• location は、緯度と経度をカンマ区切り値（46.414382,10.013988）として受け入れます。API は、この場所に最も近い場所で撮影されたパノラマを表示します。ストリートビューの画像は定期的に更新され、撮影位置も毎回少しずつ異なるため、画像が更新されると、位置が別のパノラマにスナップされる可能性があります。

• pano は、特定のパノラマ ID です。pano を指定する場合は、location も指定できます。location は、API がパノラマ ID を見つけられない場合にのみ使用されます。

次の URL パラメータは省略可能です。

パラメータ	型	説明	有効な値
heading	省略可	カメラのコンパス方位を、北から時計回りの角度で示します。	-180°～ 360° の範囲の値（度単位）
pitch	省略可	カメラの上下の角度を指定します。正の値を指定するとカメラが上向きになり、負の値を指定するとカメラが下向きになります。デフォルトのピッチ 0° は、画像が撮影されたときのカメラの位置に基づいて設定されます。このため、ピッチ 0° は水平方向であることが多いですが、必ずしもそうとは限りません。たとえば、山で撮影された画像は、水平ではないデフォルトのピッチで表示される場合があります。	-90°～ 90° の範囲の値
fov	省略可	は、画像の水平方向の画角を決定します。デフォルトは 90° です。固定サイズのビューポートを扱う場合、画角はズームレベルと見なすことができます。数値が小さいほどズームレベルが高くなります。	値は度単位で、範囲は 10°～ 100°
center	省略可	地図ビューの中心を定義します。	カンマ区切りの緯度と経度の値を受け入れます（例: 37.4218,-122.0840）。
zoom	省略可	地図の初期ズームレベルを設定します。	0（全世界）から 21（個々の建物）までの値。上限は、選択した場所で利用可能な地図データによって異なります。
maptype	省略可	読み込む地図タイルのタイプを定義します。	roadmap（デフォルト）または satellite
language	省略可	UI 要素と地図タイルのラベル表示に使用する言語を定義します。デフォルトでは、訪問者には自分の言語で地図が表示されます。このパラメータは、一部の国のタイルでのみサポートされています。リクエストされた特定の言語がタイルセットでサポートされていない場合は、そのタイルセットのデフォルトの言語が使用されます。
region	省略可	地政学的な配慮に基づいて、表示する適切な境界とラベルを定義します。	よく使用される ccTLD（「トップレベル ドメイン」）の 2 文字の値にマッピングされる 2 文字（数値ではない）の Unicode 地域サブタグとして指定された地域コードを受け入れます。サポートされている地域は、Google Maps Platform のサポート状況でご確認いただけます。

search モード

Search モードでは、表示されている地図の範囲全体を対象とした検索結果が表示されます。 検索キーワード（record+stores+in+Seattle）に場所を含めるか、center パラメータと zoom パラメータを含めて検索範囲を限定することで、検索対象の場所を定義することをおすすめします。

https://www.google.com/maps/embed/v1/search
  ?key=YOUR_API_KEY
  &q=record+stores+in+Seattle

以下のパラメータを使用できます。

パラメータ	型	説明	有効な値
q	必須	検索キーワードを定義します。	in+Seattle や near+98033 などの地理的な制限を含めることができます。
center	省略可	地図ビューの中心を定義します。	カンマ区切りの緯度と経度の値を受け入れます（例: 37.4218,-122.0840）。
zoom	省略可	地図の初期ズームレベルを設定します。	0（全世界）から 21（個々の建物）までの値。上限は、選択した場所で利用可能な地図データによって異なります。
maptype	省略可	読み込む地図タイルのタイプを定義します。	roadmap（デフォルト）または satellite
language	省略可	UI 要素と地図タイルのラベル表示に使用する言語を定義します。デフォルトでは、訪問者には自分の言語で地図が表示されます。このパラメータは、一部の国のタイルでのみサポートされています。リクエストされた特定の言語がタイルセットでサポートされていない場合は、そのタイルセットのデフォルトの言語が使用されます。
region	省略可	地政学的な配慮に基づいて、表示する適切な境界とラベルを定義します。	よく使用される ccTLD（「トップレベル ドメイン」）の 2 文字の値にマッピングされる 2 文字（数値ではない）の Unicode 地域サブタグとして指定された地域コードを受け入れます。サポートされている地域は、Google Maps Platform のサポート状況でご確認いただけます。

プレイス ID パラメータ

Maps Embed API では、場所の名前や住所を指定する代わりに、プレイス ID を使用できます。プレイス ID は、場所を一意に識別する安定した方法です。詳細については、Places API（新版）のドキュメントをご覧ください。

Maps Embed API では、次の URL パラメータにプレイス ID を指定できます。

• q
• origin
• destination
• waypoints

プレイス ID を使用するには、まず接頭辞 place_id: を追加する必要があります。次のコードは、ニューヨーク市庁舎をルート リクエストの出発地として指定しています。origin=place_id:ChIJs--MqP1YwokRBwAhjXWIHn8

• radius は、パノラマを検索する半径（メートル単位）を設定します。指定された緯度と経度の地点を中心とした半径になります。有効な値は非負整数です。デフォルト値は 50。

• source は、ストリートビューの検索対象を選択したソースに限定します。指定できる値は次のとおりです。

  • default は、ストリートビューのデフォルトのソースを使用します。検索対象が特定のソースに限定されません。
  • outdoor は、検索対象を屋外のパノラマのみに限定します。屋内コレクションは検索結果に含まれません。なお、指定された場所の屋外のパノラマが存在しない場合があります。また、検索では、屋内か屋外かを判断できるパノラマのみが返されます。たとえば、PhotoSphere は屋内か屋外かが不明なため、返されません。