Drawing svg circles with Google Maps

google-maps, javascript, svg

Solution

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

Problem

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!

Original source

Related problems