Javascript – Google maps Zoom Effect

google-maps, javascript

I am busy with creating a Google map v3 site. If you have a look on google maps site you see they physically zoom(CSS like deepzoom) the tile just before they load the new tiles.

I want to reproduce this on my side. The problem is i cant find anything in API reference that i can do this with. I thought of creating a imagemaptype and just get the node of the img tag and do a css zoom on it and the call the normal maptype gettile but to no avail. I try using bound_change to see if the bounds change but i cant get the actual node(img tags).

Any help will be appreciated


Best Solution

In the v2 API you could call the GMap2.enableContinuousZoom() method to enable this feature. In the v3 API there is no such method as this feature is enabled by default in browsers that support it.

I tried the following short example in Chrome 5.0.375.99 and Firefox 3.6.6 (both for Mac), and only the map in Chrome came with continuous zoom enabled:

<!DOCTYPE html><html> <head>   <meta http-equiv="content-type" content="text/html; charset=UTF-8" />   <title>Google Maps v3 Continuous Zoom</title>   <script src=""           type="text/javascript"></script></head> <body>   <div id="map" style="width: 500px; height: 400px;"></div>  <script type="text/javascript">    var map = new google.maps.Map(document.getElementById('map'), {      zoom: 6,      center: new google.maps.LatLng(-41.00, 174.00),      mapTypeId: google.maps.MapTypeId.ROADMAP    });  </script></body></html>