ダイナミックにGoogleMapを埋め込んだページで、ページをスクロールしようとしているのにMapが拡大 / 縮小してしまうことってありますよね。
こんなときはオプションの scrollwheel を false に設定するとスクロールイベントを無効にできます。
と。親切な方に教えて頂きました。
scrollwheel: false
DEMO
スクロールイベント無効
スクロールイベント有効
JavaScript
(function(win, doc) { "use strict"; init(); function init() { var google = win.google, elm = doc.getElementById("gmap"), mapOptions = { zoom: 15, disableDefaultUI: true, mapTypeId: google.maps.MapTypeId.ROADMAP, scrollwheel: false // スクロールイベントを無効にする }, styles = [ { "stylers": [ {"saturation": -100} ] } ], map = new google.maps.Map(elm, mapOptions), geocoder = new google.maps.Geocoder(), STYLE_NAME = "monochrome"; map.mapTypes.set(STYLE_NAME, new google.maps.StyledMapType(styles, {name: STYLE_NAME})); map.setMapTypeId(STYLE_NAME); geocoder.geocode({ "address": "マリンスタジアム" }, function(results, status){ if (status === google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); } }); } })(this, document);
今回は以上です。