システム開発・構築の神様

新しいサービスや技術を使った開発や構築。その他不具合解決など

レスポンシブデザインのためのGoogle MAP マウスホイール無効

スマートフォン対応サイトのレスポンシブデザインで、Google MAPを横幅最大値(フル:100%)表示している場合、ページをスクロールしたいだけなのに、Google MAPのズーム機能が、スクロールの代わりに機能してしまいます。

そのたびに、ブラウザーのスクロールバーを、ドラッグしてページスクロールしなければならなくなり、ユーザビリティがかなり下がってしまいます。

そこで、マウスホイールの機能を無効にできないのか?調べてみると、APIのパラメーターとして用意されていました。

Google MAP API パラメーター

scrollwheel: false

パラメーターにscrollwheelを追加するだけで、マウスホイールの機能を無効にできます。

簡単ですね。

ズームコントロールと、ドラッグでの地図移動を有効にしておけば、地図の使い勝手は、そこなわれることは無いと思います。

レスポンシブデザインで地図を表示している際は、このあたりを検討しておくと良いかもしれませんね。

関連記事