CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3zoomingmousewheel
Lizzaran
Lizzaran

Reputation: 155

Google Map mouse wheel bug

Normally it's possible to scroll / zoom vertically out of the map. There would be a grey background. I "disabled / blocked" that.

This works fine if I use the controls from Google map. But if I zoom with the mouse wheel it's kinda buggy and I can zoom out of the map, so the grey area is visible.

Here is a live example: Example

How could I fix that without disabling the mouse wheel zoom?

Image: Grey area visible, zoomed out

THEME.gmap.position = function () {
var allowedBounds;
var lastCenter;
var lastZoom;
var initCenter;
var initZoom;

function checkBounds() {
    if (THEME.base.isUndefined(allowedBounds)) {
        return false;
    }
    if (allowedBounds.getNorthEast().lat() > THEME.gmap.google_map.getBounds().getNorthEast().lat()) {
        if (allowedBounds.getSouthWest().lat() < THEME.gmap.google_map.getBounds().getSouthWest().lat()) {
            lastCenter = THEME.gmap.google_map.getCenter();
            lastZoom = THEME.gmap.google_map.getZoom();
            return true;
        }
    }
    THEME.gmap.google_map.panTo(lastCenter);
    THEME.gmap.google_map.setZoom(lastZoom);
    return false;
}

return {
    createLatLng:function (lat, lng) {
        return new google.maps.LatLng(lat, lng);
    },
    centerMap:function (latLng) {
        THEME.gmap.google_map.setCenter(latLng);
    },
    setLimit:function () {
        allowedBounds = new google.maps.LatLngBounds(
            this.createLatLng(-85.0511, -122.591),
            this.createLatLng(85.0511, -122.333)
        );
        initCenter, lastCenter = THEME.gmap.google_map.getCenter();
        initZoom, lastZoom = THEME.gmap.google_map.getZoom();
        google.maps.event.addListener(THEME.gmap.google_map, 'bounds_changed', function () {
            checkBounds();
        });
        google.maps.event.addListener(THEME.gmap.google_map, 'center_changed', function () {
            checkBounds();
        });
    }
};
}();

Upvotes: 1

Views: 436

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117314

I guess this is forced by the 2 competing events, usually both event will fire each time. As the center_changed event is redundant(the bounds also will change when the center changes), you may remove the center_changed-listener(for me this also fixes the issue)

Upvotes: 1

Related Questions