Japan 公式ブログ
Google の企業向けソリューションに関する公式な情報やユーザーの事例などを、いち早く皆さんにお届けします。
Google Maps 開発の Tips:使い勝手と見た目に優れた店舗検索機能を開発するには
2015年4月19日日曜日
本内容は、
米国時間4月1日に配信された内容
の抄訳です。
Google Maps API について問い合わせの多い内容を Map Tips としてまとめました。今回は、Google のソリューション アーキテクト、David McClusky がツールをいかにデプロイするかについて解説します。
Google Maps にかかわる開発者は、ユーザーにとって近隣にある店舗を探す上で使いやすい地図を開発して来ました。そして10年、いまや店舗検索機能は、私達が提供するツールの中でも、一番のユースケースとなっています。
今回は、Google Maps API を使って、見た目に美しく、使い勝手がよい店舗検索機能を開発するためのヒントを 7 つ紹介します。
1. 住所の入力にオートコンプリート機能を利用。
Google Maps JavaScript API のプレイス ライブラリの機能であるオートコンプリートを使用することで、Google マップの検索フィールドと同様のインスタント検索の挙動を実現することができます。つまり、ユーザーが住所の入力をはじめると、オートコンプリート機能が入力を補完するのです。
Google Places API がこの機能を持つ検索ボックス ウィジェット
を提供しているので、不正確な入力を解析する必要はありません。
2. 「サインイン」状態の活用。
Attributed Save
という機能を利用すれば、ユーザーは店舗の位置情報を保存し、 maps.google.com のような他のウェブ上の地図で店舗位置を表示させることができるようになります。また、ウェブサイトへ戻るためのリンクを位置情報とともに保存させることもできます。Google Maps JavaScript API で
サインイン
を有効にすると、ユーザーは保存済みの位置情報(自宅や職場など)を表示した状態で地図を見ることができるようになります。
3. HTML5 Geolocation を利用して顧客の位置を測定。
店舗検索ページを見ているユーザーは、なるべく早く店舗を見つけたいと思っています。
HTML5 Geolocation
を使用することで、ユーザーの位置をすぐに測定し、自動的に付近の店舗を表示させることができます。効率的かつ負担なく店舗の場所を提供することで、ユーザーは欲しい情報を素早く取得できるようになります。その結果、店舗に訪れやすくなるのです。
4. ストリートビューで店舗の外観を表示。
Google Street View Image API
を使用して店舗と近隣の外観を見られるようにすれば、顧客がお店を訪れやすくなります。たとえば
Walgreens のアプリ
は店舗検索機能に Google ストリートビューを利用していて、顧客が日常的に店舗を訪れる手助けをします。アップデートされた店舗検索機能により、顧客は簡単に Walgreens の店舗詳細や外観を確認することができるようになります。
5. 実際の走行距離に基づいた検索結果。
通常の店舗情報データベースは、空間検索の結果として店舗までの直線距離を算出しますが、これは顧客にとって紛らわしい情報となってしまう場合があります。Distance Matrix service(
距離行列サービス
)を使用して検索すれば、実際に必要な走行距離に基づいて検索結果を表示することが可能になります。さらに、
ルート サービス
を使用して、自動車ルートや公共交通機関の乗換案内を同じマップ内で表示させれば、顧客はあなたのアプリから離れることなく店舗に辿り着くことができるようになります。
6. 大きく表示されるスタイル付き地図。
人間は視覚的かつ空間的に物事を認識するので、店舗検索機能を提供するときは地図のスタイルも重要になります。地図をよりわかりやすいものにするために、マーカーを自動ハイライトしたり、すべてのマーカーが画面内に表示されるようにズームレベルを自動設定したりするなど、動的な要素を活用することをおすすめします。また、通常の Google マップを、あなたのブランドイメージやビジュアルスタイルにあわせるために
スタイル付き地図
を使用して見た目をカスタマイズすることもできます。
Teslaのサイトで、「Find Us」を選択すると、自動的に大きな地図が表示され、
該当エリアにある全てのTeslaの位置が表示されます。
7. 地図上でナビを使っているかのような感覚で店舗検索ができるようにすることもできます。
ユーザーが地図をパンしたりズームするたびに、マップ上のイベントレスナーが反応し、適切な地図が表示されるようになります。
サンプルコードを使ってすぐに始めたいという方はこちらの Google Maps API の
ライブラリー
をご覧下さい。 上記でご紹介した店舗検索機能の例も閲覧できるようになっています。
詳細につきましては、
Google Maps APIのドキュメント
をご覧下さい。
0 件のコメント :
コメントを投稿
Labels
77 min Lunch
add on
admin
Android
API
App Engine
apps
atmosphere
Atmosphere Tokyo
bigquery
Case Study
Chorme OS
Chrome for Work
Chrome ウェブストア
chromebook
chromebooks
Chromebooks for Education
Chromebooks for meeting
Chromebooks for Work
Chromebox for digital signage
Chromebox for meetings
Cloud
cloud connect
Cloud monitoring
Cloud Ranking
compliance
compute engine
Deloitte
developers
Drive for Work
earth api
Education
enterprise
Enterprise Japan
event
Firebase
G+
gadget
GAE
GCE
GCP
GEO
GEP
GfWtips
GKE
gmail
Gmail、新機能
Gone Google
GoneGoogle
Google App Engine
Google Apps
Google Apps Blog
Google Apps for Work
Google Apps Script
Google Apps ユーザー事例
Google atmosphere
Google calendar
Google calender
Google classroom
google cloud platform
Google Commerce Search
Google Derive
Google Docs
google drive
Google Drive for Work
google enterprise
Google Enterprise Day
Google for Work
Google form
Google hang-out
Google hung-out
google map
Google maps
google maps api
google maps api premier
Google Message Continuity
google search appliance
Google Shopping
Google Sites
Google Storage for Developers
Google Video
Google Wave
Google スライド
Google ドキュメント
Google フォーム
GoogleApps
GoogleApps、ユーザ事例
GoogleApps、新機能、spreadsheets
groups
gsa
healthcare
iOS
iphone
ISAE 3402 Type II
ISO 27018
IT
japan
Lotus Notes
map
maps api
media
microsoft office
migration
mobile
new features
Office 365
partner
partner program
postini
pricing
research
RSA
SAS70
search
Security
seminar
Shizuoka
Signage
Sites
SMB
SSAE 16 Type II
SSO
startup
Status Dashboard
Trial
Upload any files
vault
Virtual Conference
VMware
あっぷす先生
あっぷす先生 誤解をとく!
あっぷす先生会社訪問
イベント
おしえて!あっぷす先生
オフライン
クラウド
サイネージ
サポート
テレワーク
ハングアウト
プライバシー
ランキング
企業検索
互換性
事例
新機能
働き方
Archive
2016
2月
1月
2015
12月
11月
10月
9月
8月
7月
6月
5月
4月
「おしえて!あっぷす先生」第 5 回目 : 共同編集でコメント機能活用
有償版 Google Maps API でアプリの本番環境移行に備えるには (Google Maps...
「おしえて!あっぷす先生」第 4 回目 : Gmail と Google カレンダーで不在通知
見どころ満載、Google Atmosphere Tokyo 2015!本日よりセッション登録開始
Google 社員の働き方紹介 vol.4
Google Maps 開発の Tips:使い勝手と見た目に優れた店舗検索機能を開発するには
「おしえて!あっぷす先生」第 3 回目 : Google ドライブでファイルを共有、共同編集
マネックスグループ株式会社 も Google へ
Google Cloud Platfrom で Band Aid 30 を - ウェブ サーバの設定...
「おしえて!あっぷす先生」第 2 回目 : Gmail のラベルとフィルタ活用で、効率的にメール管理
iOS アプリから Google Maps アプリを開くことできるようになりました
電気自動車が節約に貢献!できるかが一目でわかるサイト、「EV Explorer」 でも、Google...
おしえて!あっぷす先生 第 1 回目 : イベント出欠確認での Google カレンダーの活用方法
Google Drive を使って、よりセキュアに仕事を
3月
2月
1月
2014
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2013
12月
11月
10月
9月
7月
6月
5月
4月
3月
1月
2012
12月
11月
10月
9月
8月
7月
6月
5月
4月
2月
2011
12月
10月
9月
8月
7月
5月
4月
2月
1月
2010
12月
11月
10月
9月
7月
6月
5月
3月
2月
1月
2009
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2008
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
2007
12月
Feed
Follow @GoogleforWorkJa
Useful Links
Google Apps for Work
Google Cloud Platform
Google 検索アプライアンス
Google Maps for Work
企業向けソリューション
Google Apps公式アップデート情報
0 件のコメント :
コメントを投稿