地図を埋め込む

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

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="no-referrer-when-downgrade"
  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 の境界線を削除します。
• ブラウザがリクエストとともに完全な URL を Referer ヘッダーとして送信できるようにする referrerpolicy="no-referrer-when-downgrade" プロパティ。これにより、API キーの制限が正しく機能します。

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

API キーの制限

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

マップモードを選択する

リクエスト 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 に変換したり、プラスコード「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 エスケープされた地名、住所、プラスコード、緯度と経度の座標、またはプレイス ID。Maps Embed API では、スペースをエスケープする際に + と %20 の両方がサポートされています。たとえば、「City Hall, New York, NY」を City+Hall,New+York,NY に変換したり、プラスコード「849VCWC8+R9」を 849VCWC8%2BR9 に変換したりします。
destination	必須	ルートの終点を定義します。	URL エスケープされた地名、住所、プラスコード、緯度と経度の座標、またはプレイス ID。Maps Embed API では、スペースをエスケープする際に + と %20 の両方がサポートされています。たとえば、「City Hall, New York, NY」を City+Hall,New+York,NY に変換したり、プラスコード「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 は、場所を一意に識別する安定した方法です。詳細については、Google Places API ドキュメントをご覧ください。

Maps Embed API では、次の URL パラメータのプレイス ID を受け付けます。

• q
• origin
• destination
• waypoints

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

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

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

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