ブログにGoogle Mapを埋め込む時の最適解

こんにちは、またよし れいです。

最近はブログに地図情報としてGoogle Mapが埋め込まれている事が多いので、方向音痴の僕でも目的地に辿り着く事ができます。

旅行中にレストランや観光地などを検索する際には、スマホやiPhoneを利用する事が多いと思います。スマホからグーグルマップが埋め込まれた記事を読んでいる時に、いつもハマる罠があります。

スクロールをしようと思ったら誤タッチしてしまう

スマホの画面は狭いです。

なので、Google Mapがスマホの画面ギリギリまで埋め込まれていると、スクロールして(地図の)下の文章を読もうとしていたのに、間違ってGoogle Map内をスクロールしてしまう事が多々あります。

こんな感じです↓

Temple

これはユーザーにとっては、ストレスの要因になり、せっかく訪問してもらっているのにサイトから離脱されてしまうリスクがあります。

もう1つ、使い勝手が悪い点があります。「拡大地図」をタップしてみます。

Google Mapのアプリが立ち上がると思ったら、ブラウザ(safari)が立ち上がります。ブラウザ内をさらにタップして、やっとGoogle mapのアプリが開きました。結構な手間です。

ちなみに、これはGoogleが公式サイトで紹介している方法で地図を埋め込んでいます。

最適解は?

という事で、上で紹介したような事が起きないように、どうすればユーザーがストレスを感じずにGoogle Mapを開けるか考えてみました。

そももそも、記事内に地図情報は必要でしょうか?

例えば、お店情報を載せておいて住所をタップするとGoogle Mapが開くようにしてみるのはどうでしょう?

スマホ、iPhoneでGoogle Mapが開くようにするには、以下のURL+住所を入れてください。

http://maps.apple.com/?q=

例)皇居の場合(東京都千代田区千代田1−1が住所なので、q=の後に住所を挿入)

http://maps.apple.com/?q=東京都千代田区千代田1−1
名称皇居
ウェブサイトhttp://www.kunaicho.go.jp/about/shisetsu/kokyo/kokyo.html
電話番号03-xxxx-xxxx
住所〒100-8111 東京都千代田区千代田1−1
(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のアプリが開く方が好みですが、他にもオススメの方法があれば是非教えてください。

コメントをどうぞ

メールアドレスが公開されることはありません。

またよし れい

執筆者:またよし れい

1983年、東京都葛飾区生まれ。アメリカのカレッジを卒業後独立。

2010年よりブログを立ち上げ、現在はブログ発信を中心に世界を旅しながら仕事をしている。

著書に『C言語すら知らなかった私がたった2か月でiPhoneアプリをリリースするためにやったこと』、『Facebookコミュニティ成功の法則』などがある。

これから起こる事を予想できる人間は居ません。唯一わかっているのは、人間は誰でも必ず死ぬという事だけです。僕は何度も言っていますが、「今」を楽しめない人は、この先の人生も楽しめないと思います。人生は「今」の連続で、その延長線上に未来はあるのです。過去に嫌な思い出があっても、「今」を楽しく生きる事で、過去の事実は変えられなくとも、過去の意味は変わってくるんではないでしょうか?

詳しいプロフィールはこちら>>>