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.
Please refer below images.
while zooming from zoom level 10 to 11. Showing wrong positions.
This is zoom level 11. After the Google map's zoom effects map shows correct positions of all planes.
If I use our own map then there is no problem. But we can't avoid Google map!!.
So, I searched any Google map's options. But no luck, there is no option to disable the zooming animation effect in Google map V3.
If you have any idea please let me know.
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
No comments:
Post a Comment