Draw a circle with google maps api3 that doesn't resize

Question

With google maps api2 I was drawing a circle using this code:

var markerPoint = currentMarker.getPoint();

var polyPoints = Array();

var mapNormalProj = G_NORMAL_MAP.getProjection();
var mapZoom = map.getZoom();
var clickedPixel = mapNormalProj.fromLatLngToPixel(markerPoint, mapZoom);

var polySmallRadius = 20;

var polyNumSides = 20;
var polySideLength = 18;

for (var a = 0; a<(polyNumSides+1); a++) {
 var aRad = polySideLength*a*(Math.PI/180);
 var polyRadius = polySmallRadius; 
 var pixelX = clickedPixel.x + 5 + polyRadius * Math.cos(aRad);
 var pixelY = clickedPixel.y - 10 + polyRadius * Math.sin(aRad);
 var polyPixel = new GPoint(pixelX,pixelY);
 var polyPoint = mapNormalProj.fromPixelToLatLng(polyPixel,mapZoom);
 polyPoints.push(polyPoint);
}
// Using GPolygon(points,  strokeColor?,  strokeWeight?,  strokeOpacity?,  fillColor?,  fillOpacity?)
highlightCircle = new GPolygon(polyPoints,"#000000",2,0.0,"#FF0000",.5);
map.addOverlay(highlightCircle);

I've managed to transform this code to api3:

var markerPoint = currentMarker.getPosition();

var polyPoints = Array();


var mapNormalProj = map.getProjection();
var mapZoom = map.getZoom();
var clickedPixel = mapNormalProj.fromLatLngToPoint(markerPoint);

var polyRadius = 20;

var polyNumSides = 20;
var polySideLength = 18;

for (var a = 0; a<(polyNumSides+1); a++) {
 var aRad = polySideLength*a*(Math.PI/180);
 var pixelX = clickedPixel.x + 5 + (polyRadius * Math.cos(aRad));
 var pixelY = clickedPixel.y - 10 + (polyRadius * Math.sin(aRad));
 var polyPixel = new google.maps.Point(pixelX,pixelY);
 var polyPoint = mapNormalProj.fromPointToLatLng(polyPixel);
 polyPoints.push(polyPoint);
}

highlightCircle = new google.maps.Polygon({
 paths: polyPoints,
 strokeColor: "#FF0000",
 strokeOpacity: 0.8,
 strokeWeight: 2,
 fillColor: "#FF0000",
 fillOpacity: 0.35
});

highlightCircle.setMap(map);

If you look more closely at the api3 example, the mapZoom variable is not used anywhere.

In api2, the code generates a small circle around my marker - around 35px radius. When I zoom into the map, the radius stays at 35px (because the zoom is taken into account).

With api3 on the other hand, I have a huge circle - more than 200px wide and when I zoom in, the circle becomes bigger and bigger.

It behaves the same way as the circle object available in api3.

What I want is just a small circle around my marker, that is not 100km in diameter, but just a few pixels around my marker (this circle acts like a hover element in html).

Any ideas how to achieve that?

Answer 1

You might have better luck using custom marker, not a circle. See "Vector Icon" from the documentation here: https://developers.google.com/maps/documentation/javascript/overlays#Icons

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(-25.363882, 131.044922),
    icon: {
        path: google.maps.SymbolPath.CIRCLE,
        scale: 10
    },
    draggable: true,
    map: map
});