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.

2 Answers 2


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();
            function() {
                mapContainer.style.visibility = "";
        mapContainer.style.visibility = "hidden";
        center: center,
        zoom: zoom

3. Google Map Options

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

  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

  • Option 3 used to work very well, but required v3.31 or earlier. Since 14 August 2018 the earliest available version is 3.32, which unfortunately doesn't support the animatedZoom option.
    – Mike
    Commented Aug 20, 2018 at 15:34

Now that all earlier versions which supported the excellent method 3 above have been withdrawn I have changed my OL3+ maps to use a variation of method 2. But instead of hiding the underlying google map while it's animating I am hiding my openlayers overlays until the google map catches up. The original code was based on the openlayers 3 example http://openlayers.org/en/v3.0.0/examples/google-map.html ( there's easier to understand OL4 version at http://bl.ocks.org/ThomasG77/21192c7045ab8f50e22e ) and I have simply updated the change resolution handling:

view.on('change:resolution', function() {
    var mapContainer = map.getViewport().getElementsByTagName("CANVAS")[0];
        function() {
            mapContainer.style.visibility = "";
    mapContainer.style.visibility = "hidden";

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.