Japan 公式ブログ
Google の企業向けソリューションに関する公式な情報やユーザーの事例などを、いち早く皆さんにお届けします。
Google Maps 開発の Tips:使い勝手と見た目に優れた店舗検索機能を開発するには
2015年4月20日月曜日
本内容は、
米国時間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
#GoogleCloudSummit
#GoogleNext18
#GoogleNext19
77 min Lunch
add on
admin
Advanced Solutions Lab
AI
AI Hub
AI Platform
Android
Anthos
API
App Engine
App Maker
apps
Apps script
ASL
atmosphere
Atmosphere Tokyo
AutoML
AutoML Natural Language
AutoML Translation
bigquery
Box
Calendar
Case Study
Chorme OS
Chrome
Chrome Enterprise
Chrome Enterprise 導入事例
Chrome for Work
Chrome ウェブストア
chromebook
chromebooks
Chromebooks for Education
Chromebooks for meeting
Chromebooks for Work
Chromebox
Chromebox for digital signage
Chromebox for meetings
Chronicle
Cisco
Cloud
Cloud Armor
Cloud AutoML
Cloud AutoML Natural Language
Cloud AutoML Translation
Cloud AutoML Vision
cloud connect
Cloud Dataflow
Cloud Identity
Cloud IoT Core
Cloud Load Balancing
Cloud Memorystore for Redis
Cloud monitoring
Cloud OnAir
Cloud Pub/Sub
Cloud Ranking
Cloud Services Platform
Cloud Storage
Cloud TPU
compliance
compute engine
Contact Center AI
Container Engine
Coursera
Deloitte
developers
Dialogflow Enterprise Edition
Drive for Work
Dropbox
earth api
Education
enterprise
Enterprise Japan
event
Evernote
Expo
Firebase
FISC
Forrester
G Suite
G Suite Business
G Suite for Education
G Suite 事例
G Suite 導入事例
G+
gadget
GAE
GCE
GCP
GCP 導入事例
GCP 認定資格チャレンジ
GDPR
GEO
GEP
GfWtips
GKE
gmail
Gmail、新機能
Gone Google
GoneGoogle
Google App Engine
Google Apps
Google Apps Blog
Google Apps for Education
Google Apps for Work
Google Apps Script
Google Apps ユーザー事例
Google Apps 導入事例
Google atmosphere
Google calendar
Google calender
Google classroom
Google Cloud
Google Cloud Certification
Google Cloud Next '18 in Tokyo
Google Cloud Next '19 in Tokyo
google cloud platform
Google Cloud Search
Google Cloud Summit '18
Google Cloud 認定資格チャレンジ
Google Commerce Search
Google Derive
Google Docs
Google Docs API
google drive
Google Drive for Work
Google Earth
google enterprise
Google Enterprise Day
Google for Education
Google for Work
Google form
Google hang-out
Google hung-out
google map
Google maps
google maps api
google maps api premier
Google Maps APIs
Google Maps for Work
Google Maps Platform
Google Message Continuity
google search appliance
Google Shopping
Google Sites
Google Springboard
Google Storage for Developers
Google Video
Google Wave
Google スライド
Google ドキュメント
Google ドライブ
Google フォーム
Google マップ
Google+
GoogleApps
GoogleApps、新機能、spreadsheets
groups
gsa
Hangouts Meet
healthcare
Hybrid Cloud Platform for Google Cloud
Inbox
INSIDE
iOS
iphone
ISAE 3402 Type II
ISO 27018
IT
Jamboard
japan
Kubeflow Pipelines
Looker
Lotus Notes
Machine learning
map
maps api
Maps 導入事例
Maps-sensei
Mapsコーナー
media
microsoft office
migration
mobile
new features
Next
Next Tokyo
OAuth
Office 365
Office of the CTO
Osaka
partner
Partner Interconnect
partner program
Partner Summit
postini
pricing
Qwiklabs
region
research
RSA
SAP
SAS70
search
Security
Security Key
seminar
Shizuoka
Signage
Sites
SMB
SSAE 16 Type II
startup
Status Dashboard
TensorFlow
Trial
Upload any files
vault
Veolia
Viacom
Virtual Conference
VMware
あっぷす先生
あっぷす先生 誤解をとく!
あっぷす先生会社訪問
イベント
インフラストラクチャ
おしえて!あっぷす先生
おしえて!くらうど先生
オフライン
クラウド
くらうど先生
サイネージ
サポート
セキュリティ
チームドライブ
チェンジマネジメント
デジタル トランスフォーメーション
テレワーク
パートナー
ハングアウト
プライバシー
まっぷす先生
ランキング
リージョン
ワークインサイト
円周率
海底ケーブル
企業検索
機械学習
互換性
事例
小売
新機能
働き方
認定資格
Archive
2019
8月
7月
6月
5月
4月
3月
2月
1月
2018
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2017
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2016
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2015
12月
11月
10月
9月
8月
7月
6月
5月
4月
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月
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 @googlecloud_jp
Useful Links
G Suite
Google Cloud Platform
Google 検索アプライアンス
Google Maps
G Suite 公式アップデート情報
0 件のコメント :
コメントを投稿