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

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

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

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

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

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

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

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

上述のページから「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パラメータという、選択できる店舗情報の詳細レベルと似ています。

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

今までのStepで作成した店舗のプロットや地図の表示は、Google Maps Platformの複数のAPIを用いて作成されているものであり、エクスポートして実際に自身のサーバーやローカルPCでそれらを表示するにはAPIを使えるようにAPIKEYと呼ばれる認証情報をセットしてあげる必要があります。
本稿では、APIKEYの作成方法には触れませんがこちらもとても簡単なものですので、実際に試してみてください。

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