Question

When drawing large circle onto a Google map, when the circles get really large (thousands of miles translated to meters) the circles start to sine wave over the map.

Example

Here’s the code to set up and draw the circles:

   //larger, outer circle
    var options = {
    strokeWeight: 0,
    fillColor: '#AA0000',
    fillOpacity: 0.5,
    map: map,
    radius: distance
    };

    //smaller inner circle
    var options2 = {
    strokeWeight: 0,
    fillColor: '#AA0000',
    fillOpacity: 0.5,
    map: map,
    radius: distance/2
    };

    circles[circles.length]=new google.maps.Circle(options);
    circles[circles.length]=new google.maps.Circle(options2);

    for(var i=0; i<=circles.length-1; i++)
    {
        circles[i].bindTo('center', marker, 'position');
    }

Is there a way to avoid that?

Answer 1

This is an exciting question!

If you’re upset about the repeating sin pattern, but actually want your circle to cover a geographic area on the earth defined by radius in meters then you’re best bet is to increase the zoom level (or shrink the width of the map) to reduce the overall size of the are being presented. Alternatively, you could reduce the distance to a value that doesn’t encompass the north pole (which is what I believe would trigger the awkward sin pattern)

If you’re trying to draw a circle in the geometric, not geographic, sense then the Google Maps circle overlay isn’t for you. Instead, you should use a GroundOverlay (rendering a transparent PNG server-side somewhere) or CustomOverlay (the technically more advanced solution). A CustomOverlay could include a DIV with a circle you’ve drawn using any HTML technique like CSS or an SVG.