CSS

Google Maps 無限スクロール地獄からの脱出方法

そこを行く読者のアナタ,スマホで何を検索することが多いですか?
私は,よく食べ物屋さんを探します。あ,あと,自転車屋さんも探しますね。で,そのまま電話で予約したい。
今回はそんなお店検索から始まったひとネタです。
先日,打ち合わせ先から直接帰宅することになっていたので,打ち合わせ先の近所にある焼き鳥屋さんに行こうと思いました。
で,スマホで行きたいお店の名前を検索して,GoogleMapの地図が出てきたまでは良いのですが,地図から下へスクロールできない。
スクロールしても,地図がスクロールされてしまう。
もう,そっからはひたすら地図をスクロールするばかりで,ページの下の方が見られんやんけ!状態。
命名,「GoogleMap無限スクロール地獄」。
で,私が取った手段は,リロード(再読込)してからの,手裏剣スクロールです。
この離れ技により,ページ最下部まで一気にスクロールし,そこから戻ることでMapの下にあった電話番号を押すことができました。
要するに,お店や食べ物の名前で検索をして,見つかったページの地図を見て,「お,これ近所じゃん。行こう」で,その下の電話番号をタップして電話予約したかったのです。
ところが,地図がGoogleMapで,スマホの画面の横いっぱいに表示が広がっていたので,スクロールしていくと,指が地図にあたった時点で,ページ自体のスクロールをしてくれずに,地図のスクロールを始めるわけです。
地図が下に見え始めた途端に,一気にスクロールすれば,地図の向こう岸(?)に渡れるわけですが,「使い勝手が悪いわ」というお話でした。
スマホサイトでは,GoogleMapを表示しているdivの外から「gmap_wrapper」等のIDを設定したdivでくくってやり,これに対して

#gmap_wrapper {
    width: 80%;
    margin: 0 auto;
}

を指定することで,両サイドにスクロールできるスペースが作れますので,スマホ用のサイトにGoogleMapを設置する方々は,忘れずにつけましょう!
ついでに「GoogleMapで見る」ボタンもつけてあげるとさらに使い勝手が良いかと思います。

関連記事

コメント

この記事へのトラックバックはありません。