How to create circle in google map v3 with same radius in all zoom level?

Question

I am working on map code migration from v2 to v3.

In v2 i have create circle with help of GProjection and Overlay and it will look same size in all zoom level.

In v3 google gives Circle class that will create circle in map but it will change in different zoom level.

I want to create circle that will have same size in all zoom level.

I want to know any other way in google map v3 by that i can create circle with same size for all zoom level.

Thanks in advance.

Answer 1

To create circles that are the same pixel size on the screen (versus same area size in geographic coordinates), you would traditionally use a Marker with a custom Icon in the shape of a circle. But now you can be more flexible and use the relatively new Symbols in v3.

var marker = new google.maps.Marker({   position: new google.maps.LatLng(-122.5,47.5),   icon: {     path: google.maps.SymbolPath.CIRCLE,     fillOpacity: 0.5,     fillColor: '#ff0000',     strokeOpacity: 1.0,     strokeColor: '#fff000',     strokeWeight: 3.0,      scale: 20 //pixels   } }); 

Aside: You can make cool animations out of these symbols as well: http://googlegeodevelopers.blogspot.com/2012/06/powerful-data-visualization-with.html

Answer 2

I use this code to manage zoom and scaling circles on my Google Map V3:

google.maps.event.addListener(iMap.map, 'zoom_changed', function () {     for (var i = 0; i < iMap.circle.length; i++) {         var p = Math.pow(2, (21 - iMap.map.getZoom()));         iMap.circle[i].setRadius(p * 1128.497220 * 0.0027);     }      menu.hide(); });