[GIS] Disabling Google Maps zooming animation effect

google-maps-apiopenlayers-2

I am using OpenLayers mapping library in my application. I have integrated Google map V3 & added other several WMS overlays, Vector layers etc. Every thing working fine. But I am facing big problem in Google map's zooming animation effect.

While zooming to any location, for few seconds all the vector features goes to some other positions. once the zooming finished all features restoring to the original positions.

See the below images.

  1. while zooming from zoom level 10 to 11. Showing wrong positions.

enter image description here

  1. This is zoom level 11. After the Google map's zoom effects map shows correct positions of all planes.

enter image description here

If I use our own map then there is no problem but we can't avoid Google map!!.

I searched any Google map's options. But no luck, there is no option to disable the zooming animation effect in Google map V3.

Best Answer

This is a long contested issue that doesn't seem to be near resolve.. http://code.google.com/p/gmaps-api-issues/issues/detail?id=3033

Apparently this was easy in v2: disableContinuousZoom()

However; now - not so much..

Here's three options proposed by others:

1. CSS

    *{
        -webkit-transition-property: none!important;
        transition-property: none!important;
        /* These doesn't affect anything, but, just in case. */
        -webkit-animation: none!important;
        animation: none!important;
    }

2. Extend Openlayers

/** 
 * APIMethod: setMapObjectCenter
 * Set the mapObject to the specified center and zoom
 * 
 * Parameters:
 * center - {Object} MapObject LonLat format
 * zoom - {int} MapObject zoom format
 */
setMapObjectCenter: function(center, zoom) {
    if (this.animationEnabled === false && zoom != this.mapObject.zoom) {
        var mapContainer = this.getMapContainer();
        google.maps.event.addListenerOnce(
            this.mapObject, 
            "idle", 
            function() {
                mapContainer.style.visibility = "";
            }
        );
        mapContainer.style.visibility = "hidden";
    }
    this.mapObject.setOptions({
        center: center,
        zoom: zoom
    });
},

3. Google Map Options

If you're using a few versions back, there is still an option for this (hazar!):

gMap.setOptions({
  animatedZoom: false,
  ...
});

My experience:

Options 1 & 2 did not work for me. I'm using v3.16, and option 3 worked a charm.

Some info from an answer on SO

Related Question