diff --git a/examples/google-v3.html b/examples/google-v3.html index c3f8aa458d..4281655f58 100644 --- a/examples/google-v3.html +++ b/examples/google-v3.html @@ -19,6 +19,8 @@
Animated + zoom (if supported by GMaps on your device)
If you use the Google Maps v3 API with a Google layer, you don't need to include an API key. This layer only works in the diff --git a/examples/google-v3.js b/examples/google-v3.js index 9c173e3128..4d4cd205df 100644 --- a/examples/google-v3.js +++ b/examples/google-v3.js @@ -29,4 +29,12 @@ function init() { new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject() ), 5); + + // add behavior to html + var animate = document.getElementById("animate"); + animate.onclick = function() { + for (var i=map.layers.length-1; i>=0; --i) { + map.layers[i].animationEnabled = this.checked; + } + }; } diff --git a/lib/OpenLayers/Layer/Google/v3.js b/lib/OpenLayers/Layer/Google/v3.js index 15d71b5d29..0cddbdb629 100644 --- a/lib/OpenLayers/Layer/Google/v3.js +++ b/lib/OpenLayers/Layer/Google/v3.js @@ -51,6 +51,19 @@ OpenLayers.Layer.Google.v3 = { projection: "EPSG:900913" }, + /** + * APIProperty: animationEnabled + * {Boolean} If set to true, the transition between zoom levels will be + * animated (if supported by the GMaps API for the device used). Set to + * false to match the zooming experience of other layer types. Default + * is true. Note that the GMaps API does not give us control over zoom + * animation, so if set to false, when zooming, this will make the + * layer temporarily invisible, wait until GMaps reports the map being + * idle, and make it visible again. The result will be a blank layer + * for a few moments while zooming. + */ + animationEnabled: true, + /** * Method: loadMapObject * Load the GMap and register appropriate event listeners. If we can't @@ -340,6 +353,17 @@ OpenLayers.Layer.Google.v3 = { * 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