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.

Solution 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

Solution 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();
});

Comments

[Jorge]

What do you mean with the same size? that has the same radius no matter the zoom in the map?

[Ashvin]

same size: means in zoom level 6 with radius 10 circle size is different and in zoom level 7 radius 10 circle size is different.map draw circle based on projection value so same radius no effects different in every zoom level.

[Marcelo]

Do you mean a circle that changes size with respect to the ground but stays the same size in terms of pixels?

[AlfaTeK]

Using this has some issues with zIndex and mouse events handling: stackoverflow.com/questions/11845916/… code.google.com/p/gmaps-api-issues/issues/detail?id=3611

[David Jones]

Unfortunately, it seems that symbols are not currently compatible with Retina displays: stackoverflow.com/questions/17352770/…

[Arman Bimatov]

Using scale didn't work for me, I had to use radius, something like this: 'radius: MAX_VALUE / Math.pow(2, map.getZoom())'

[Arman Ortega]

I wonder how did you come up this two values 1128.497220 and 0.0027 ?

[Rarw]

The 1128.49 is the scale factor for Google Maps at zoom level 20. Not sure the 0.0027 though. My guess is that's the size he's going for.