グーグルAPI

Google Map埋め込み Google Map API を使う

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

Google MapのウェブAPI Google Map Platform の Google Map API を使って、Google Map埋め込みを行いました

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

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

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

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

Google Map Platform

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

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

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

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

APIの使用量が少ない場合は、無料で使えます

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

クレジットカードの登録は必要でした

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

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

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

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

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

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

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

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

グーグルマップの利用 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を使うことにしました

(モードにSearchを使っていたのですがこれはEmbed Advancedになります Maps Embed APIはEmbed Advancedは有料ですが、アドバンスに該当しないEmbedだと無料で使えます モードが、Direction、Street View、Searchだと有料なのですが、モードを、PlaceかViewにしておけば無料です なので、searchではなく、placeを使うようにしました)

 

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

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

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

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

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

こちらは、楽天トラベル検索でホテルのIDを指定して、ホテルの情報を取得し、その情報を利用して、グーグルマップを検索して表示させています



名称:【湘南クリスタルホテル】
湘南クリスタルホテル
特徴 藤沢市で唯一のシティホテル。格式は高いが、 隠れ家のような落ち着きのあるホテル
口コミ・評判 0件 平均点数 0
[ひとりあたり最低料金] 7,000円~
[住所]   神奈川県藤沢市南藤沢14-1
[アクセス] JR・小田急江ノ島線・江ノ島電鉄「藤沢駅」(南口)より徒歩5分。
[最寄り駅] 藤沢
詳細情報はこちら
格安予約だんぜんお得!!
Yahoo!クーポンるるぶクーポン楽天クーポンJTBクーポンホテル最安値検索航空券最安値検索

ホテル・旅館 湘南 ホテル」おすすめ・口コミ

楽天ウェブサービスセンター

 

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

Google Place API

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

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

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

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

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

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

place/textsearch/xml?

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

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

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

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

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

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

といったところ

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

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

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

TCD Google Maps

 

TCD Google Mapsというグーグルマップを埋め込むプラグインがあります

TCDというのは、ブログで使うワードプレステーマを作っているTCDですね

ただ単に埋め込むなら、Google Mapを使って、Google Mapのメニューから地図を埋め込むHTMLを取ってきて、記事に貼りつけるか、あるいは、このTCD Google Mapsで住所を指定して地図を貼りつけるかでもよいわけですが、施設検索と連携して施設名称から施設周辺の地図と施設の情報を表示させるようにしたかったので、このプラグインは使いませんでした

プラグインのインストールはしてみたのですが、地図の見た目をカスタマイズできる機能はあるのですが、使う予定はなかったので、Google Mapを開いてHTMLをとってくるのとあまりかわらないと思ったので使っていませんでした

Google Map Platformを使って、連携できそうだから使わなくていいです