以上で完了です。

開発を始めるには、デベロッパー ドキュメント をご覧下さい。

Google Maps Embed API をアクティベートする

まず初めに Google Developers Console で次の作業を行います。

  1. プロジェクトを作成または選択する
  2. Google Maps Embed API をアクティベートする
  3. 適切なキーを作成する
続ける

Google Maps Embed API

概要

Google Maps Embed API では、簡単な HTTP リクエストを使用してインタラクティブ マップやストリートビューのパノラマ画像をサイトに配置できます。 これらは、Google Maps Embed API の URL を iframe の src 属性として設定することにより、ウェブページやブログに簡単に埋め込むことができます。

<iframe
  width="600"
  height="450"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
    &q=Space+Needle,Seattle+WA" allowfullscreen>
</iframe>

ユーザーに合わせたマップの作成

サイトの各訪問者にはその訪問者に合わせて作成された Google マップが表示されます。 訪問者が Google アカウントを使用してサインインする場合は、表示されるマップに、保存したプレイス、自宅、職場などが組み込まれます。

また、これは、ある地点に星印を付けるなどのマップでの操作が保存され、デスクトップやモバイル端末で Google マップを簡単に表示できることを意味します。

これらのユーザー固有の詳細は他のユーザーには表示されません。 各訪問者にはその訪問者に合わせて作成されたマップが表示されます。

埋め込みが簡単

Google Maps Embed API のマップは簡単にウェブページに追加できます。作成した URL を iframe の src 属性の値として設定するだけです。 iframe の heightwidth の属性でマップのサイズを制御します。 JavaScript は必要ありません。

使用制限がない

Google Maps Embed API に使用制限はありません。 使用制限や 1 秒あたりのクエリのスロットリングを気にせずに、マップやストリートビューのパノラマ画像を高トラフィックのウェブサイトに埋め込むことができます。

マップに広告を表示

Google Maps Embed API ではマップ上に広告を表示することができます。 指定したマップに表示される広告フォーマットと広告セットは、予告なしに変更される場合があります。

URL の形式

Google Maps Embed API リクエストの URL は次のとおりです。

https://www.google.com/maps/embed/v1/MODE?key=YOUR_API_KEY&parameters

説明:

  • {MODE}placedirectionssearchviewstreetview のいずれかです。
  • {YOUR_API_KEY} は無料の API キーです。
  • parameters には省略可能なパラメータとモード固有のパラメータを含めます。

API キー

Google Maps Embed API へのすべてのリクエストに、key パラメータの値として無料の API キーを含める必要があります。 キーを使用すると、アプリケーションの Maps API の使用状況を監視できます。また、必要に応じて、Google からウェブサイトやアプリケーションについて連絡することができるようになります。

Google Maps Embed API の使用を開始するには、下のボタンをクリックして Google Maps Embed API を自動でアクティベートし、API キーを取得してください。

キーを取得する

または、次の手順で API キーを取得します。

  1. Google API Console に移動します。
  2. プロジェクトを作成または選択します。
  3. [Continue] をクリックして API を有効にします。
  4. [Credentials] ページで API キーを取得します(さらに、API キーの制限を設定します)。
    注: 制限のない既存の API キーまたはブラウザの制限が設定されたキーを所有している場合は、そのキーを使用することもできます。
  5. ベスト プラクティスに従って API キーを保護することをお勧めします。


Google API Console では、既存のキーの検索有効な API リストの表示も可能です。

Google API Console の使用に関する詳細については、API Console のヘルプをご覧ください。

API キーの制限のタイプ

Google Maps API は、Android または iOS アプリ、ウェブブラウザ、HTTP 経由のウェブサービスで使用できます。どのプラットフォームの API でも、汎用的な(制限されていない)API キーを使用できます。必要に応じて、API キーに制限(たとえば、HTTP リファラー)を追加することも可能です。制限されたキーは、その制限タイプをサポートするプラットフォーム上でのみ機能します。キーや認証情報の詳細については、こちらをご覧ください

マップのモード

使用可能なマップの埋め込みモードは 4 つあります。 モードはリクエスト URL で指定されます。

Place モード

Place モードは、目標物、お店、地理的特徴、街などの特定のプレイスや住所にマップピンを表示します。

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

次の URL パラメータが必要です。

  • q は、マップ上のハイライトするプレイスを定義します。 プレイスの名前、住所、プレイス ID のいずれかで位置を指定します。 文字列は URL エスケープされている必要があります。したがって、「City Hall, New York, NY」のような住所は、City+Hall,New+York,NY に変換する必要があります

(Google Maps Embed API では、空白のエスケープ時に +%20 の両方をサポートします)。 プレイス ID には place_id: という接頭辞を付ける必要があります。

属性を付けて保存

Google アカウントにログインしたユーザーは、q パラメータで指定したプレイスを保存できます。 保存したプレイスは、ウェブやモバイル端末の別の Google マップで表示できます。 デフォルトでは、埋め込みマップから保存されたプレイスには、そのプレイスを保存した状況や日時がわかるように属性情報が含められます。

次のパラメータを使用して属性をカスタマイズできます。

  • attribution_source は、サイトやアプリにこの保存を属性付けます。 attribution_web_urlattribution_ios_deep_link_id を設定する前にカスタムの attribution_source を含める必要があります。 デフォルトはマップが表示されていたページの URL パスに設定されます。例:

https://example.com/path/ * attribution_web_url はウェブサイトに戻るリンクを指定します。 attribution_source が指定されていない場合は、埋め込みマップが表示される URL が attribution_web_url のデフォルトとなります。例:

https://example.com/path/page.html * attribution_ios_deep_link_id は、iOS アプリケーションにディープリンクを提供する URL スキームを指定します。 iOS 用の Google マップに表示する場合は、attribution_web_url の代わりに attribution_ios_deep_link_id が表示されます。

以下の例では、ブリティッシュ コロンビア州のビクトリアにあるエンプレス ホテルを表示しています。 この場所を保存すると、「Google Maps Embed API」にこの保存が属性付けられます。 属性が URL として表示されます。 この例は、Google Maps URL スキームを利用して iOS ユーザーに運転ルートを示します。

https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
  &q=Fairmont+Empress,Victoria+BC
  &attribution_source=Google+Maps+Embed+API
  &attribution_web_url=http://www.fairmont.com/empress-victoria/
  &attribution_ios_deep_link_id=comgooglemaps://?daddr=Fairmont+Empress,+Victoria,+BC

Directions モード

Directions モードは、マップ上の 2 か所以上の指定された地点間のルートと、距離や移動時間も表示します。

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

次の URL パラメータが必要です。

  • origin は、ルート表示の始点を定義します。 値は、プレイスの名前、住所、プレイス ID のいずれかになります。

文字列は URL エスケープされている必要があります。したがって、「City Hall, New York, NY」のような住所は、City+Hall,New+York,NY に変換する必要があります (Google Maps Embed API では、空白のエスケープ時に +%20 の両方をサポートします)。

プレイス ID には place_id: という接頭辞を付ける必要があります。 * destination は、ルートの終点を定義します。

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

  • waypoints は、出発地と目的地の間のルートに 1 か所以上の経由地を指定します。 複数のウェイポイントを指定するには、パイプ文字(|)を使用して複数のプレイスを区切ります(例:

Berlin,Germany|Paris,France)。 ウェイポイントは 20 か所まで指定できます。 各ウェイポイントには、プレイスの名前、住所、プレイス ID のいずれかを指定できます。

  • mode は、移動手段を定義します。 オプションは、drivingwalking(利用可能な場合は歩行者専用道路と歩道が優先されます)、bicycling(利用可能な場合は自転車専用道路と優先道路を経由してルーティングされます)、transitflying です。

モードが指定されていない場合、Google Maps Embed API は指定されたルートに最も関連した 1 つ以上のモードを表示します。

  • avoid は、tollsferrieshighways を避けるよう Google マップに通知します。 複数の値はパイプ文字で区切ります(例: avoid=tolls|highways)。 これを指定しても、制限対象を含むルートは除外されないことに注意してください。単に、希望のルートが優先されるだけです。

  • units は、結果に距離を表示するときの単位(metric またはimperial)を指定します。 units が指定されていない場合は、クエリの origin の国によって使用する単位が決まります。

Search モードは、表示可能なマップ領域に検索結果を表示します。 検索する場所を定義するには、検索キーワード(record+stores+in+Seattle)で場所を含めるか、検索の範囲を指定する centerzoom のパラメータを含めることをお勧めします。

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

次の URL パラメータが必要です。

  • q は、検索キーワードを指定します。 これには、in+Seattlenear+98033 などの場所を限定するキーワードを含めることができます。

View モード

View モードは、マーカーやルートが表示されていないマップを返します。

以下の例では、省略可能な maptype パラメータを使用して、マップの衛星ビューを表示しています。

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

次の URL パラメータが必要です。

  • center は、マップ ウィンドウの中心を定義し、コンマ区切りの緯度と経度の値(-33.8569,151.2152)で指定します。

省略可能なパラメータ

次の省略可能なパラメータは上記のどのマップ モードでも使用できます。

  • center は、マップビューの中心を定義します。 これは、コンマ区切りの緯度と経度の値(37.4218,-122.0840 など)で指定します。

  • zoom は、マップの初期ズームレベルを設定します。 指定できる値の範囲は、0(全世界)~21(個々の建物)です。 上限は、選択した位置で使用できるマップデータによって異なる場合があります。

  • maptype は、roadmap(デフォルト)または satellite のいずれかになり、ロードするマップタイルのタイプを定義します。

  • language は、UI 要素と、マップタイルのラベルの表示に使用する言語を定義します。 このパラメータがサポートされているのは一部の国のタイルのみであることに注意してください。リクエストされた特定の言語がタイルセットでサポートされていない場合は、そのタイルセットのデフォルトの言語が使用されます。

デフォルトでは、訪問者が使用する言語でマップが表示されます。

  • region は、地政学的区別に基づいて、表示する境界やラベルを適切に定義します。 2 文字の ccTLD(トップレベル ドメイン)値で指定される地域コードを使用します。

プレイス ID パラメータ

Google Maps Embed API は、プレイス名や住所を指定する代わりにプレイス ID の使用をサポートしています。 プレイス ID はプレイスを一意に識別する不変の方法です。 プレイス ID の検索方法や使用方法の詳細については、Google Places API ドキュメントをご覧ください。

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

  • q

  • origin

  • destination

  • waypoints

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

streetview モード

Google Maps Embed API を使用すると、ストリートビューの画像をインタラクティブなパノラマとして自分のサイトやブログで表示できます。 Google ストリートビューでは、対象地域全体について、指定した位置からのパノラマビューを提供しています。 ユーザーから提供された Photo Sphere に加え、 ストリートビューの特別なコレクションも利用できます。

各ストリートビューのパノラマ画像は、単一地点からの 360 度ビューを提供します。 画像には、360 度の水平ビュー(周囲全体)と 180 度の垂直ビュー(真上から真下)が含まれています。 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 は、カメラの角度(上向きまたは下向き)を指定します。 pitch は、-90° から 90° の範囲で指定されます。 正の値はカメラの角度を上向きにし、負の値はカメラの角度を下向きにします。 デフォルトのピッチ 0° は、画像が撮影されたカメラの位置に基づいて設定されます。

そのため、多くの場合ピッチは 0° ですが、常に水平とは限りません。 たとえば、山で撮影された画像は、水平ではないデフォルトのピッチで表示されます。

  • fov は、画像のビューの水平方向の視野を決定します。 ビューの視野は度数(10° から 100° の範囲)で表されます。 デフォルト値は 90° です。 固定サイズのビューポートを処理する場合、ビューの視野はズームレベルに相当します(ズームレベルは数字が小さいほど広域を表示します)。

  • language は、UI 要素とラベルで使用する言語を定義します。 デフォルトでは、訪問者が使用する言語で UI 要素が表示されます。

  • region は、地政学的区別に基づいて、表示する境界やラベルを適切に定義します。 2 文字の ccTLD(トップレベル ドメイン)値で指定される地域コードを使用します。

マップの埋め込み

ウェブページで Google Maps Embed API を使用するには、iframe の src 属性の値として作成した URL を設定します。 iframe の heightwidth の属性でマップのサイズを制御します。

<iframe
  width="450"
  height="250"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/search?key=YOUR_API_KEY&q=record+stores+in+Seattle" allowfullscreen>
</iframe>

ヒント: iframe プロパティに allowfullscreen を追加して、マップの特定部分を画面全体に表示できるようにします。

ヒント: frameborder="0"style="border:0" のプロパティは、マップの周囲にある標準の iframe の境界線を削除します。

iframe のサイズを変更して自分のウェブサイトの構造や設計に合わせることができますが、訪問者は一般的に大きなマップの方が操作しやすいと感じているようです。

高さや幅が 200 ピクセルのサイズより小さい埋め込みマップはサポートされていないことに注意してください。

フィードバックを送信...

ご不明な点がありましたら、Google のサポートページをご覧ください。