WebAPI

Google Map API のMaps Embed API を使って無料でGoogle Map埋め込み

この記事では商品の紹介にアフィリエイト広告を利用しています 「広告について」

ブログやサイトに地図を埋め込むならGoogle Mapが便利です

ブラウザでGoogle Mapを表示して、メニューにある地図の埋め込み用のHTMLをコピーして使うのも無料です

この記事はこのHTMLをコピーしてくる方法ではなく、Google MapのWebAPIを利用する方法についてが主な内容です

Google Maps Platform の Google Maps API Maps Embed API を使った無料でできるGoogle Map埋め込み方法です

Google Mapの埋め込み 無料で行う方法

単に埋め込むなら、Google Mapのメニューから「地図を共有または埋め込む」を選んで、「地図を埋め込む」で、埋め込むHTMLをコピーしてきて貼り付ければ、ブログの記事に埋め込むことができます

地図のサイズも大・中・小・カスタムサイズが選べます

Google Maps APIでGoogle Map埋め込み表示

Google Maps APIでブログにグーグルマップ連携情報掲載

Rakuten Developersや、ぐるなびWEBサービス、Yahoo!デベロッパーネットワークなどで、ホテル・旅館・レストランなどのデータをWebAPIを使って取得するプログラムを作成しています

さらにこれらのWebAPIとグーグルマップとを連携してみました

楽天トラベル検索結果や楽天GORA検索結果、ぐるなびやYahoo!ロコの検索結果はホテルや店舗の位置情報があるので連携させて、グーグルマップも表示させてみました

Google Maps PlatformでGoogle Maps APIを使う

Google Maps Platformには、マップとルートとプレイスの3種類のGoogle MapのWebAPIがあります

地図を表示させるだけならマップです

ですが、APIを使うには、Googleアカウントが必要で、さらにGoogle Maps Platformへの登録が必要です

Google Maps Platformは、有料サービスですが、一か月あたり200ドル分は無料で使えるサービスです

APIの使用量が少ない場合は、無料で使えますし、マップ表示だけならクレジットを消費しなくても無料でできる方法があります

Google Maps Platformの登録とクレジットカード

料金が発生しない範囲内での利用でもクレジットカードの登録は必要です

プロジェクトを作成して、必要な情報を登録し、クレジットカードも登録することで、APIKEYが発行されます

APIを使うときには、このAPIKEYを渡す必要があります

APIKEYが発行されたら、APIの認証情報で、APIのアクセス制限をかけておきます

APIKEYは複数発行することができるようで、APIKEYごとのアクセス制限がかけられます

自分のウェブサイトからのアクセスに限るようにするためには、HTTPリファラーを設定すればよいですし、自分のパソコンからだけに限るなら、IPが設定できます

制限をかけておくと、その制限条件にあてはまらないアクセスは拒絶されます

登録とクレジットカードに関しては、こちらの記事もごらんください

Google Mapの埋め込み Maps APIの利用方法

Google Maps PlatformのMapsのAPIにもいくつか種類があるのですが、どれが使えるのか調べてみました

Maps URL Google Mapの利用

Maps URL は、APIKEYがなくても使えるAPIです

地図の検索API https://www.google.com/maps/search/?api=1

この後ろに、&query=キーワードとか、&place_id=プレイスID をつけることで、キーワードで検索してくれた場所や、プレイスIDで指定した施設の場所をグーグルマップで表示できます

しかし、このURLにアクセスすることで、グーグルマップをブラウザで開くために使うもので、地図を埋め込み表示するものでは有りません

このURLではiframを使ってもページ内に埋め込むことができません

Maps Static API

次に、Maps Static API

https://maps.googleapis.com/maps/api/staticmap?

これは、pngなどのイメージ画像で地図を取ってくるAPIです

イメージを取ってきます

イメージではなく、拡大縮小もできるマップを埋め込みたいので、これは使いません

Maps JavaScript API

さらに、Maps JavaScript API

これは、名前のとおり、JavaScriptを使って地図を埋め込み表示できるAPIです

JavaScriptを利用せずに行いたいので、こちらではなくMaps Embed API を使います

Maps Embed API

そこでMaps Embed API

iframeを使って、記事の中に地図を埋め込むことができます

Google Maps Platformのドキュメントのサイトに行くと、Maps Embed API の概要やクイックスタートもあり、iframeの中にどのように記述すればよいかわかります

iframeを生成するiframeジェネレーターもあります

Google Map Maps Embed APIの利用方法

Maps Embed APIの利用方法

GoogleのMaps Embed API の使い方は簡単です

こちらのURLに必要なパラメータを設定するだけです

iframeで記事の中に地図を埋め込み表示できます

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

Maps Embed API モード

<MODE>には、Place、View、Direction、Street View、Searchから設定します

Placeがランドマークや施設、住所など特定の場所にピン表示のある地図です

施設の名称をパラメータ(parameters)の&q=に入れることで、施設名称で検索してくれます

&center=緯度,経度 をパラメータを追加することで、表示中心を指定することもできます

施設名称で検索した結果、複数の施設がヒットしてしまっている場合でも、希望の施設を中心に表示させることができます

検索結果の施設が中心位置にある場合は、施設が中心に表示されるのと合わせて、施設名称なども地図内に表示します

楽天トラベル検索やぐるなび検索で取得してきた施設名称と緯度経度をこのMaps Embed APIに入れて表示させることが可能です

これで、ホテルやレストランの詳細情報と連携させて、グーグルマップ表示を追加することができます

当初はモードにSearchを使ってみました

Searchは表示地図内にある施設を検索してヒットした施設を複数でも表示するモードです

Maps Embed APIは無料で利用できるAPIですが、使うモードによって、Embed Advancedになり、有料となっていました

モードがDirection、Street View、Searchだと有料、PlaceかViewであれば無料でした

なので、searchではなく、placeを使うようにしました

現在のMaps Embed API のドキュメントにはMaps Embed API は無料としか書いていないようなのですが、モードを切り替えて有料になるかの確認はしていません

Directionは地点間の距離や時間の表示、Street Viewはストリートビューのパノラマ表示、Viewはマーカーの表示のない地図です

Maps Embed API パラメータとiframe

Maps Embed API に設定するパラメータはこちらのようになります

https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=施設の名称&center=緯度,経度&zoom=地図のズームレベル

iframeに入れると、こちらのような感じになります

<iframe width="600" height="300" frameborder="0" style="border: 0" src="https://www.google.com/maps/embed/v1/place?key=API_KEY&q=施設の名称&center=経度,緯度&zoom=17" allowfullscreen="allowfullscreen"></iframe>

Maps Embed API iframe 使用例

こちらが使用例です

地図の部分は、上記のようなiframeをブログの記事に貼り付けて表示しています

施設名称 q=横浜赤レンガ倉庫2号館

中心座標 center=35.4525944,139.6428944

ズームレベル zoom=17

横浜赤レンガ倉庫2号館
【住所】 日本、〒231-0001 神奈川県横浜市中区新港1丁目1
詳細情報・口コミは地図をクリックしてご覧ください

こちらはGoogle Place APIのテキスト検索を使って、グーグルマップの施設検索を行い、施設の地図表示を行ったサンプルサイトです

キーワードを入力して検索するだけです

検索すると、該当する施設のマーカー付きの地図が表示されますのでお試しにどうぞ

グーグルマップAPIを使った施設検索(自作サンプルサイト)

グーグルマップの施設を検索してくれるWeb APIのPlaces APIについてはこちらに記載していますので参考にしてください

Maps Embed API 合わせて利用 WebAPIについて

Maps Embed API 連携しよう WebAPI

WordPressやPHPプログラミング、WebAPIの使い方、簡単なところから実際に使ってみて、作成してみて、イメージをつかみながらやってみましょう

PHPでWebAPIを利用する際の簡単な説明はこちらの記事でぐるなびAPIを例にして書いていますので参考にしてください

オリジナルWEBサイト制作 PHP・Laravelを学ぼう

【PHP/Laravelコース】PHP/Laravelを学んでオリジナルWEBサイト制作

無料の説明動画配信無料プログラミング体験無料オンライン相談を実施しています

キャリアアップ・転職・副業・複業・兼業へのチャレンジを考えるなら無料キャリアカウンセリング副業コースもあります

【PHP/Laravelコース】
PHP/Laravelを学んでオリジナルサービス開発

無料体験 無料動画 無料相談
無料キャリア相談 副業チャレンジ