CODEWITHSUNDEEP
javascriptgoogle-mapssvg
duhaime
duhaime

Reputation: 27611

Drawing svg circles with Google Maps

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!

Upvotes: 3

Views: 4204

Answers (2)

Jarrod McGuire
Jarrod McGuire

Reputation: 683

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

Upvotes: 5

duhaime
duhaime

Reputation: 27611

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

Upvotes: 5

Related Questions