WebAPI

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

Google Map 埋め込み

【PR】クリエイター募集
スマホ写真でお小遣い

無料写真素材なら【写真AC】

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

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

この記事では、Google MapのWebAPI Google Maps Platform の Google Maps API を使ったGoogle Map埋め込みについて書いています

プログラミングも遊びになる
toio ( トイオ ) バリューパック「つくって、あそんで、ひらめいて」
ロボットトイ 一人でもみんなでも 手を動かして遊ぶ 創意工夫を引き出す

対象年齢6歳から
飽きずに遊べる つくる楽しさ
ビジュアルプログラミングで
広がる創造の世界
楽天市場
アマゾン
ヤフー

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

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

Rakuten Developersや、ぐるなびWEBサービスで、ホテル・旅館・レストランなどのデータが引っ張ってこれるようになりました

さらにグーグルマップと連携しようと思います

楽天の商品検索は、位置情報とは関係ないので連携しないですが、楽天トラベル検索結果や楽天GORA検索結果、ぐるなび検索結果は店舗やホテルの位置情報があるので連携させて、グーグルマップを表示させます

Google Maps Platform

Google Maps Platformには、マップとルートとプレイスがあります

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

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

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

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

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

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

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

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

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

KEYが漏れたら、だれでもアクセスすることができてしまいますから

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

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

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

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

Google Mapの埋め込み利用方法

Google Mapの利用 Maps URL

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

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

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

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

このURLにアクセスすることで、グーグルマップをブラウザで開くために使うものです

Maps Static API

次に、Maps Static API

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

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

イメージです

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

Maps JavaScript API

さらに、Maps JavaScript API

これは、名前のとおり、JavaScriptですが、中心座標を設定する方法はわかったのですが、施設と結びつける方法が見当たりません

Maps Embed API

そこで、Maps Embed API

iframeが使えます

記事に埋め込むことができます

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

当初、MODEには、searchを使うことにしました

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

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

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

検索結果の施設が単独だった場合は、施設が中心に表示されるのと合わせて、施設名称や住所なども地図内に表示してくれます

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

これで、ホテルやレストランの詳細情報にグーグルマップを追加することができるようになりました

当初はモードにSearchを使ってみていたのですがこれはEmbed Advancedになります

Maps Embed APIはEmbed Advancedは有料ですが、アドバンスに該当しないEmbedだと無料で使えます

モードが、Direction、Street View、Searchだと有料なのですが、モードを、PlaceかViewにしておけば無料です

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

WebAPIプログラミング
WebAPIを簡単なPHPプログラムで使ってみようWebAPIの使い方 簡単PHPプログラミングで使ってみよう 簡単 お試し WebAPIとPHPプログラミング...

Google Map埋め込み 施設情報取得

Google Place API

また、ホテルでもレストランでもない施設の情報を取ってくるために、Google Place APIも調査しました

Google Maps PlatformのAPIには、楽天やぐるなびのような親切なAPI仕様書がないようなのでちょっと困ります

Google Maps Platformのドキュメントの説明と合わせて、XMLを実際に吐き出させてみて、どんな構造しているのかをみながらやってます

プレイス検索とプレイス詳細を合わせて使います

プレイス検索は周辺検索とかテキスト検索とかいくつか種類がありますが、フリーワードで検索できるテキスト検索を使ってみます

テキスト検索リクエスト
https://maps.googleapis.com/maps/api/

place/textsearch/xml?

&query=にフリーキーワードを入れれば、適合度の高いプレイス情報を検索してくれます

ぴったり一致していないものでも、検索してくれるようです

検索結果件数がデータに含まれないようで、検索結果を複数ページで作成するような方法がとれないようではあるのですけれど

プレイス検索で検索するとplace_idがとれるので、このプレイスIDをパラメータにすることで、プレイス詳細がとれます

データの内容としては、楽天トラベルやぐるなびの施設情報に比べると少ないようです

名称、緯度経度、住所、電話番号、WebURL、オープンクローズ、オープン時間、口コミ

といったところ

施設の内容とか特徴とかはないようです

もうちょっと情報が欲しかったけれども、口コミ関係については、グーグルマップのローカルガイドの方たちが記入した口コミとかアップロードした写真が取得できます

施設検索して、取得できる情報の表示と、グーグルマップの表示をできるようにしようと思います