ブログやサイトに地図を埋め込むならGoogle Mapが便利です
ブラウザでGoogle Mapを表示して、メニューにある地図の埋め込み用のHTMLをコピーして使うのも無料です
この記事はこのHTMLをコピーしてくる方法ではなく、Google MapのWebAPIを利用する方法についてが主な内容です
Google Maps Platform の Google Maps API Maps Embed API を使った無料でできるGoogle Map埋め込み方法です
Contents
Google Mapの埋め込み 無料で行う方法
単に埋め込むなら、Google Mapのメニューから「地図を共有または埋め込む」を選んで、「地図を埋め込む」で、埋め込むHTMLをコピーしてきて貼り付ければ、ブログの記事に埋め込むことができます
地図のサイズも大・中・小・カスタムサイズが選べます
Google Maps APIでGoogle Map埋め込み表示
Google Maps APIでブログにグーグルマップ連携情報掲載
Rakuten Developersや、ぐるなびＷＥＢサービス、Yahoo!デベロッパーネットワークなどで、ホテル・旅館・レストランなどのデータをWebAPIを使って取得するプログラムを作成しています
さらにこれらのWebAPIとグーグルマップとを連携してみました
楽天トラベル検索結果や楽天GORA検索結果、ぐるなびやYahoo!ロコの検索結果はホテルや店舗の位置情報があるので連携させて、グーグルマップも表示させてみました
Google Maps PlatformでGoogle Maps APIを使う
Google Maps Platformには、マップとルートとプレイスの３種類のGoogle MapのWebAPIがあります
地図を表示させるだけならマップです
ですが、APIを使うには、Googleアカウントが必要で、さらにGoogle Maps Platformへの登録が必要です
Google Maps Platformは、有料サービスですが、一か月あたり２００ドル分は無料で使えるサービスです
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
これは、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で記事の中に地図を埋め込み表示できます
Maps Embed API モード
＜MODE>には、Place、View、Direction、Street View、Searchから設定します
Placeがランドマークや施設、住所など特定の場所にピン表示のある地図です
施設の名称をパラメータ（parameters）の&q=に入れることで、施設名称で検索してくれます
¢er=緯度,経度 をパラメータを追加することで、表示中心を指定することもできます
施設名称で検索した結果、複数の施設がヒットしてしまっている場合でも、希望の施設を中心に表示させることができます
検索結果の施設が中心位置にある場合は、施設が中心に表示されるのと合わせて、施設名称なども地図内に表示します
楽天トラベル検索やぐるなび検索で取得してきた施設名称と緯度経度をこの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=施設の名称¢er=緯度,経度&zoom=地図のズームレベルiframeに入れると、こちらのような感じになります
<iframe width="600" height="３００" frameborder="0" style="border: 0" src="https://www.google.com/maps/embed/v1/place?key=API_KEY&q=施設の名称¢er=経度,緯度&zoom=17" allowfullscreen="allowfullscreen"></iframe>
Maps Embed API iframe 使用例
こちらが使用例です
地図の部分は、上記のようなiframeをブログの記事に貼り付けて表示しています
施設名称 q=横浜赤レンガ倉庫2号館
中心座標 center=35.4525944,139.6428944
ズームレベル zoom=17
【住所】 日本、〒231-0001 神奈川県横浜市中区新港１丁目１
詳細情報・口コミは地図をクリックしてご覧ください
こちらはGoogle Place APIのテキスト検索を使って、グーグルマップの施設検索を行い、施設の地図表示を行ったサンプルサイトです
キーワードを入力して検索するだけです
検索すると、該当する施設のマーカー付きの地図が表示されますのでお試しにどうぞ
グーグルマップの施設を検索してくれるWeb APIのPlaces APIについてはこちらに記載していますので参考にしてください
Maps Embed API 合わせて利用 WebAPIについて
Maps Embed API 連携しよう WebAPI
WordPressやPHPプログラミング、WebAPIの使い方、簡単なところから実際に使ってみて、作成してみて、イメージをつかみながらやってみましょう
PHPでWebAPIを利用する際の簡単な説明はこちらの記事でぐるなびAPIを例にして書いていますので参考にしてください
オリジナルWEBサイト制作 ＰＨＰ・Laravelを学ぼう
【PHP/Laravelコース】PHP/Laravelを学んでオリジナルWEBサイト制作無料の説明動画配信
キャリアアップ・転職・副業・複業・兼業へのチャレンジを考えるなら
PHP/Laravelを学んでオリジナルサービス開発
無料体験
無料キャリア相談
