Drawing svg circles with Google Maps

Question

I'm working on a site that wants to use draw some circles to represent points of interest on a Google Map, but haven't found a way to draw a proper SVG circle element on the map.

The Google documentation outlines a circle element but these render as polygons rather than circles (take a look at the borders of the circle and you'll see they have a strange polygon fit to a rough circle shape, rather than a raw svg:circle element).

Is it possible to draw a true SVG circle with things like a r attribute for radius? Any pointers would be very helpful!

I guess they like memes https://meta.stackexchange.com/a/19775/269001. I don't know google-maps API, so I won't be able to help too much, but note that they're doing it with canvas API, not SVG. — Kaiido, May 01 '17 at 13:38
If only I could add a spontaneous drop shadow to Google's freehand circles :/ — duhaime, May 01 '17 at 14:14

duhaime · Accepted Answer · 2018-04-17T22:23:48.200

This feels a little janky but one can evidently freehand a circle in SVG then pass that drawn element as a marker to the map:

var icon = {
    path: 'M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0',
    fillColor: '#FF0000',
    fillOpacity: .6,
    anchor: new google.maps.Point(0,0),
    strokeWeight: 0,
    scale: 1
}

var marker = new google.maps.Marker({
    position: {lat: 55, lng: 0},
    map: map,
    draggable: false,
    icon: icon
});

via How to use SVG markers in Google Maps API v3

score 3 · Answer 2 · answered May 14 '20 at 15:26

Very similar to the answer posted by duhaime, I have used this method before to get a circle by using

google.maps.SymbolPath.CIRCLE

in the path property (SymbolPath is just an enum for a couple of built-in shapes, CIRCLE equates to '0').

Not entirely sure of the rationale (assume the original size is effectively 2px wide), but you can use 'scale' like the radius, so a scale of 20 will give a diameter of 40px. If you add strokeWeight, this will add to the overall diameter by the stroke width. I think the formula for overall diameter might be (scale + round(0.5 * stoke)) * 2, because if you use an odd number for the stroke it ends up being the even number above.

In the example below, you will end up with circle diameter of 46px (even though the stroke is only 5)

var icon = {
    path: google.maps.SymbolPath.CIRCLE,
    fillColor: "#da291c",
    fillOpacity: 0.5,
    strokeColor: "blue",
    strokeOpacity: 1,
    strokeWeight: 5,
    scale: 20
}

var marker = new google.maps.Marker({
    position: {lat: 57, lng: -2},
    map: map,
    icon: icon
});

Drawing svg circles with Google Maps

2 Answers2