Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Maps API V3 disable smooth zoom

I am making an app for Samsung Smart TV 2012 and its basically HTML5 and JavaScript. The Google Maps V3 works very good but one thing. It seems that the TV doesn't have enough processing power so smooth effects look horrible. the biggest problem is setZoom() which is smooth. So my question: is there a method or maybe a parameter to disable smooth zoom? or maybe to disable all smooth effects for the entire map? Thanks!!

like image 867
codeTemplar Avatar asked Jul 13 '12 07:07

codeTemplar


2 Answers

Yes, you can disable the smooth zoom! But with some...changes. In V2 you could do just "disableContinuousZoom()" and solve the problem, but in this new version, google's guys didn't implemented it.

This is the first possibility (and the worst in my opinion..):

 * {
  -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;
}

(this solution is from: http://code.google.com/p/gmaps-api-issues/issues/detail?id=3033&q=continuous%20zoom&colspec=ID%20Type%20Status%20Introduced%20Fixed%20Summary%20Stars%20ApiType%20Internal)

The other solution, and I think, the best, is what has implemented in 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
    });
},

This is fairly strange, because you use the map Container with styles, but depends of your case, maybe the best solution is this!

like image 80
ferran87 Avatar answered Sep 21 '22 19:09

ferran87


although it's not on gmaps docs, this works for me:

map = new google.maps.Map(el, {animatedZoom: false});
like image 40
Chris Avatar answered Sep 21 '22 19:09

Chris