スクロールを奪われないGooglemapの設置

viva

大体のホームページにはGoogleMapが付いていますが、
PCでの閲覧時、スクロールを奪われることが多々あります。
そして、少しイラッとします。
そんな些細な事ですが、ひと手間掛けるだけで改善できます。
※他に簡単な方法がある場合は教えて頂けると助かります。
DEMO：https://inou-e.com/test/
GoogleMapをはじめにセットする場合、
オプションで以下の設定（スクロールOFF）を有効にします。

scrollwheel: false

よく上のコードだけ適用しているホームページを拝見します。
確かに「イラッ」とはしないですが、やっぱりユーザーの使い勝手も考えてあげたいです。

そこで、３つのイベント（クリック、ズーム、ドラッグ）が発生した場合に、上記コードで指定したオプション設定を解除します。
※クリックに関しては正直微妙なイベント感はありますが、一応入れております。

// Event
google.maps.event.addListener(shopmap, 'click', function(){scrollwheel();});
google.maps.event.addListener(shopmap, 'zoom_changed', function(){scrollwheel();});
google.maps.event.addListener(shopmap, 'drag', function(){scrollwheel();});
function scrollwheel() {
shopmap.setOptions({scrollwheel: true});
}

コレでかなり改善されたのではないでしょうか。
また、DEMOページのソースは、ポジションの変更も掛けれるコードになっています。
ほとんどの地図が真ん中にピンが立っていますが、「ここを見せた方がお客さんに分かりやすいだろう」って時に使える仕様です。

viva

More Posts