みかづきブログ その3

3ヶ月つづけてみました。

APIで埋め込んだGoogleMapのマウスホイールイベントを無効にする

ダイナミックに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);

今回は以上です。