資料ダウンロード・お問い合わせ

Google Maps Platform
トピックス

Google Maps API 導入ガイド

Quick Builderを用いて地域にフォーカスした地図を作成する

■はじめに

旅行先のホテル選びや、引っ越しなどでの住宅を選ぶ際に、気になるものは何でしょう?
駅からの距離や、まわりの飲食店の数やレート、公園や病院の有無なども気になるところかと思います。そんな時にはどうやって周りの情報を入手していますか?たぶん、多くの人は「新宿駅 カフェ」などの目的地と気になる情報を組み合わせて、ググっているでしょう。若しくは、Googleマップの「付近の場所を検索する」機能を使って気になる場所の地図を表示し、検索キーワードを入れているかもしれません。

吉祥寺周辺のカフェをGoogleMapで検索

ただ、これらの方法では、
①ホテルサイトで気になるホテルを見つける
②ホテルの近くのカフェやレストランなどをGoogle検索する
③ホテルの最寄り駅までのルートをGoogleMapで検索する
のように、ユーザーは様々なアプリを使って情報を集める手間が生じ、UXとして良いものとはいえません。

そこで今回は、Google Maps Platformの新しい機能であるQuick Builder Neighborhood Discoveryの紹介と、上記の課題を解決できる簡単なDemoアプリを作ってみたいと思います。

■Quick Builder Neighborhood Discoveryとは?

GCPのコンソール画面からGoogle Maps Platformメニューを確認すると(記事執筆時点:2022/06/24)、「ソリューションライブラリ」というページがあります。これは、ノンコード、数Stepで簡単にGoogleMapのAPI群を利用したアプリが作れてしまうというソリューションサービスです。今回はこのうちオレンジ枠で囲った「Neighborhood Discovery」というソリューションを紹介します。

ソリューションライブラリのサービス画面

「Neighborhood Discovery」は、ページの解説文によると
「地域に密着した情報によって地図をカスタマイズできます。近隣のスポット情報をユーザーが把握できるようにして、レストラン、学校、公園などの地元のスポットを案内します。」
というサービスのようです。何だか色々できそうですが、これだけではよく分からないので、習うより慣れろ、ということでまずは実際に触れてみましょう。

■Demoアプリを作ってみる

上述のページから「Neighborhood Discovery」をクリックすると、

Neighborhood Discoveryのサービス画面

のような画面が表示されました。画面左側にあるとおり、4つのStepでアプリをつくることができるようです。

さっそく、Step1の「場所を選択」に地図を作りたい場所の住所を入力すると、右側の地図画面が移動、表示されます。次に、「近隣地域の半径」スライダーをセットして、入力した住所を中心に、半径〇〇mの地域までを検索対象とすることを決定します。
ここでは、例として弊社のオフィスがある「東京都新宿区北新宿2-21-1」を中心に、半径1000mでセットしたいと思います。
Step1の「場所を選択」が完了したら、「次へ」をクリックしてStep2に行きましょう。

Step2では、Step1でセットした条件の中に入る店舗などを抽出できます。「ナイトライフ」や「コインランドリー」など、予めカテゴリ分けされているので、自身で地図上に表示したいカテゴリをチェックすると、右側の地図画面に表示されます。
実際に「レストラン、カフェ」と「ATM・銀行」を選択すると、Step1で選択した住所周辺の店舗が表示されました。

好みのカテゴリを選択して地図にプロット

もし、ここで表示される店舗をカスタマイズしたい場合には、「場所の追加または削除」ボタンから、任意の店舗のみ追加・削除をすることもできます。もしあなたが店舗のオーナーさんで、自身のチェーン店のみを表示したいなどの目的であれば、カスタマイズも可能です。
Step2の選択が終わったら、Step3に進みます。

Step3では、「デザインを確認」という内容で、基本~上級までのパターンで地図上にプロットした店舗情報の表示レベルを選択できます。細かい点ですが、これはGoogle Maps PlatformのPlaces APIのfieldsパラメータという、選択できる店舗情報の詳細レベルと似ています。
https://developers.google.com/maps/documentation/places/web-service/details#fields

もし、店舗情報の位置や名前などの基本的な情報のみ分かれば良いのであれば「基本」の内容で十分ですし、観光案内などの目的をケースに、ユーザーに店舗情報をよりリッチに見せたい場合には「上級」を選択しましょう。Google Mapで利用できるような口コミ情報なども表示が可能になります。店舗情報の表示レベルを選択したら、Step4に進みます。

上級レベルの内容で店舗情報を表示

Step4では、Step1~3で設定した内容で自動作成されたWebアプリのコードをエクスポートすることができます。エクスポート方法は、自身のPCのクリップボードにコピーする、JSFiddleにエクスポートする、Google Cloud Storageにエクスポートするの3パターンが選べます。気軽に結果を確認するだけであれば、クリップボードにコードをコピーする方法で十分ですので、エクスポートボタンを押してみてください。もし開発者であればJSFiddleなどで直接開くことができるのでとても便利です。
エクスポートボタンをクリックすると、以下のような認証情報を選択する画面が出ます。

エクスポート時にセットする認証情報

今までのStepで作成した店舗のプロットや地図の表示は、Google Maps Platformの複数のAPIを用いて作成されているものであり、エクスポートして実際に自身のサーバーやローカルPCでそれらを表示するにはAPIを使えるようにAPIKEYと呼ばれる認証情報をセットしてあげる必要があります。
本稿では、APIKEYの作成方法には触れませんがこちらもとても簡単なものですので、実際に試してみてください。
https://developers.google.com/maps/documentation/javascript/get-api-key
なお、「Neighborhood Discovery」では、利用するAPIKEYにMaps JavaScript API, Places API, Distance Matrix API, Directions APIの4つのAPIサービスを許可したKEYが必要です。

利用するAPIKEYを選択して、コードをクリップボードにコピーすると、お使いのPCのクリップボード内にコードがコピーされます。メモ帳などのテキストエディターを開いて、コードをペーストし、適当なファイル名でhtmlファイルとして保存してください。保存したhtmlファイルをブラウザーで開くと、先程までGCPコンソール上で作成をしていた地図が表示されると思います。また、Step2でカスタマイズしてあげた店舗をクリックすると、Step1の設定住所からのルート検索ができたり、使い慣れたGoogle Map同様に、任意の場所までの検索などもできます。

以上で、Demoは終了です。

設定した店舗までのルート検索と店舗情報の表示

■さいごに

「Neighborhood Discovery」のDemoについて、いかがでしたでしょうか?
冒頭に、現状の良くある検索シナリオで挙げた
①ホテルサイトで気になるホテルを見つける
②ホテルの近くのカフェやレストランなどをGoogle検索する
③ホテルの最寄り駅までのルートをGoogleMapで検索する
を解決するためには、
・1つのサービス内でユーザーが欲しい情報を用意する
・わかりやすいUIで誰でも操作できるようにする
ことがとても重要であり「Neighborhood Discovery」ではこれらを満たす、「地図を検索インターフェースとした製品」と言えるでしょう。従来までのテキストベースの検索方法と比べて、知らない土地を探すなどの空間情報が関連するシナリオではこの方法はとても有効です。例えば、以下のようなシナリオ

・旅行、宿泊サイトでホテルごとに「観光スポット」、「ナイトライフ」などの旅行者向けのカテゴリを表示
・賃貸物件検索サイトで物件を中心に「食料品」、「コインランドリー」など居住者向けのカテゴリを表示
・商店街やチェーン店舗オーナー様が駅前を中心に商店街の店舗や自社チェーン店を表示

が考えられるでしょう。
1つのサービス内でユーザーが欲しい情報を提供できるということは、ページの滞在率の向上などの付帯効果も期待でき、UX向上も図れる画期的な方法です。

ぜひ、Google Maps Platformの新サービスである「Neighborhood Discovery」を使って、ユーザー体験をより向上させるソリューションを体験してみてください。


国際航業はGoogle Maps Platformのプレミアパートナーです。


Posted by Google engineering team 吉田魁人

製品・サービスのご案内

サービス紹介サイトはこちら
【Google Maps Platform】https://biz.kkc.co.jp/google_maps/

お問い合わせ

国際航業株式会社
LBSセンシング事業部 法人営業部
e-mail:google_enterprise_sales@kk-grp.jp TEL:03-6362-5000