こんにちは、またよし れいです。
最近はブログに地図情報としてGoogle Mapが埋め込まれている事が多いので、方向音痴の僕でも目的地に辿り着く事ができます。
旅行中にレストランや観光地などを検索する際には、スマホやiPhoneを利用する事が多いと思います。スマホからグーグルマップが埋め込まれた記事を読んでいる時に、いつもハマる罠があります。
スクロールをしようと思ったら誤タッチしてしまう
スマホの画面は狭いです。
なので、Google Mapがスマホの画面ギリギリまで埋め込まれていると、スクロールして（地図の）下の文章を読もうとしていたのに、間違ってGoogle Map内をスクロールしてしまう事が多々あります。
こんな感じです↓
これはユーザーにとっては、ストレスの要因になり、せっかく訪問してもらっているのにサイトから離脱されてしまうリスクがあります。
もう1つ、使い勝手が悪い点があります。「拡大地図」をタップしてみます。
Google Mapのアプリが立ち上がると思ったら、ブラウザ(safari)が立ち上がります。ブラウザ内をさらにタップして、やっとGoogle mapのアプリが開きました。結構な手間です。
ちなみに、これはGoogleが公式サイトで紹介している方法で地図を埋め込んでいます。
最適解は？
という事で、上で紹介したような事が起きないように、どうすればユーザーがストレスを感じずにGoogle Mapを開けるか考えてみました。
そももそも、記事内に地図情報は必要でしょうか？
例えば、お店情報を載せておいて住所をタップするとGoogle Mapが開くようにしてみるのはどうでしょう？
スマホ、iPhoneでGoogle Mapが開くようにするには、以下のURL＋住所を入れてください。
例）皇居の場合（東京都千代田区千代田１−１が住所なので、q=の後に住所を挿入）
| 名称 | 皇居 |
|---|---|
| ウェブサイト | http://www.kunaicho.go.jp/about/shisetsu/kokyo/kokyo.html |
| 電話番号 | 03-xxxx-xxxx |
| 住所 | 〒100-8111 東京都千代田区千代田１−１ (Google mapで開く) |
こうすれば、上手くGoogle Mapのアプリが開くと思います。PCからでも、Google Mapが問題なく開きます。
Google Mapを埋め込みたい
Google Mapを埋め込みたい人は、「Embed Responsively」というサイトを利用するのがオススメです。スマホからスクロールしても、地図内をスクロールする事はありません。タップした時だけGoogle Mapのアプリが立ち上がる仕組みになっています。
Embed Responsivelyは、Google MapやYouTubeをレスポンシブ対応するのに便利なサイトなのでが、google Mapをこのサイトでレスポンシブ対応させると↓のようになります。
PCからは地図内をスクロールする事ができますが、スマホからアクセスすると地図内はスクロール不可でタップした時のみGoogle Mapのアプリが立ち上がります。これならユーザーがイライラする事はありません。
僕は個人的にはリンクをタップした時に、でGoogle Mapのアプリが開く方が好みですが、他にもオススメの方法があれば是非教えてください。
