株式会社カラフルクローバー公式ブログ

WordPress・HTML・CSS等のTipsを公開しています! 株式会社カラフルクローバー公式ブログ

広告の企画制作の株式会社カラフルクローバー 公式サイトはこちら

*

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

      2015/11/11

そこを行く読者のアナタ,スマホで何を検索することが多いですか?

私は,よく食べ物屋さんを探します。あ,あと,自転車屋さんも探しますね。で,そのまま電話で予約したい。
今回はそんなお店検索から始まったひとネタです。

先日,打ち合わせ先から直接帰宅することになっていたので,打ち合わせ先の近所にある焼き鳥屋さんに行こうと思いました。
で,スマホで行きたいお店の名前を検索して,GoogleMapの地図が出てきたまでは良いのですが,地図から下へスクロールできない。
スクロールしても,地図がスクロールされてしまう。

もう,そっからはひたすら地図をスクロールするばかりで,ページの下の方が見られんやんけ!状態。
命名,「GoogleMap無限スクロール地獄」。

で,私が取った手段は,リロード(再読込)してからの,手裏剣スクロールです。
この離れ技により,ページ最下部まで一気にスクロールし,そこから戻ることでMapの下にあった電話番号を押すことができました。

要するに,お店や食べ物の名前で検索をして,見つかったページの地図を見て,「お,これ近所じゃん。行こう」で,その下の電話番号をタップして電話予約したかったのです。
ところが,地図がGoogleMapで,スマホの画面の横いっぱいに表示が広がっていたので,スクロールしていくと,指が地図にあたった時点で,ページ自体のスクロールをしてくれずに,地図のスクロールを始めるわけです。
地図が下に見え始めた途端に,一気にスクロールすれば,地図の向こう岸(?)に渡れるわけですが,「使い勝手が悪いわ」というお話でした。

スマホサイトでは,GoogleMapを表示しているdivの外から「gmap_wrapper」等のIDを設定したdivでくくってやり,これに対して

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

 - CSS

  • このエントリーをはてなブックマークに追加

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

スクロール位置調整
内部リンクのスクロール位置をずらす方法

現在、ヘッダー部分等、position: fixed;にて固定したレイアウトの場 …

文字サイズの調整無効
iPhoneやAndroidのブラウザーによる文字サイズの自動調整を無効にする方法

iPhoneやAndroidのブラウザーによる文字サイズの自動調整を無効にする方 …

Googleアナリティクスは実践あるのみ。

みなさんこんばんわ 本日学習したのは  googleアナリティクスの試験勉強。 …

画像の下に隙間が出来るときは、img要素にvertical-align: bottom;を指定で解決!

画像の下に隙間が出来て困ったことはありませんか? コーディング初心者なら一度は悩 …