Google Maps 無限スクロール地獄からの脱出方法
2015/11/11
そこを行く読者のアナタ,スマホで何を検索することが多いですか?
私は,よく食べ物屋さんを探します。あ,あと,自転車屋さんも探しますね。で,そのまま電話で予約したい。
今回はそんなお店検索から始まったひとネタです。
先日,打ち合わせ先から直接帰宅することになっていたので,打ち合わせ先の近所にある焼き鳥屋さんに行こうと思いました。
で,スマホで行きたいお店の名前を検索して,GoogleMapの地図が出てきたまでは良いのですが,地図から下へスクロールできない。
スクロールしても,地図がスクロールされてしまう。
もう,そっからはひたすら地図をスクロールするばかりで,ページの下の方が見られんやんけ!状態。
命名,「GoogleMap無限スクロール地獄」。
で,私が取った手段は,リロード(再読込)してからの,手裏剣スクロールです。
この離れ技により,ページ最下部まで一気にスクロールし,そこから戻ることでMapの下にあった電話番号を押すことができました。
要するに,お店や食べ物の名前で検索をして,見つかったページの地図を見て,「お,これ近所じゃん。行こう」で,その下の電話番号をタップして電話予約したかったのです。
ところが,地図がGoogleMapで,スマホの画面の横いっぱいに表示が広がっていたので,スクロールしていくと,指が地図にあたった時点で,ページ自体のスクロールをしてくれずに,地図のスクロールを始めるわけです。
地図が下に見え始めた途端に,一気にスクロールすれば,地図の向こう岸(?)に渡れるわけですが,「使い勝手が悪いわ」というお話でした。
スマホサイトでは,GoogleMapを表示しているdivの外から「gmap_wrapper」等のIDを設定したdivでくくってやり,これに対して
1 2 3 4 |
#gmap_wrapper { width: 80%; margin: 0 auto; } |
を指定することで,両サイドにスクロールできるスペースが作れますので,スマホ用のサイトにGoogleMapを設置する方々は,忘れずにつけましょう!
ついでに「GoogleMapで見る」ボタンもつけてあげるとさらに使い勝手が良いかと思います。
関連記事
-
-
Googleアナリティクスは実践あるのみ。
みなさんこんばんわ 本日学習したのは googleアナリティクスの試験勉強。 …
-
-
画像の下に隙間が出来るときは、img要素にvertical-align: bottom;を指定で解決!
画像の下に隙間が出来て困ったことはありませんか? コーディング初心者なら一度は悩 …
-
-
iPhoneやAndroidのブラウザーによる文字サイズの自動調整を無効にする方法
iPhoneやAndroidのブラウザーによる文字サイズの自動調整を無効にする方 …
-
-
内部リンクのスクロール位置をずらす方法
現在、ヘッダー部分等、position: fixed;にて固定したレイアウトの場 …