How to draw a circle using polygon in GoogleMaps

google-maps, google-maps-api-3

Solution

Basically it's not possible to get "the points", because a circle isn't created based on points(there would be an infinite number of points)

Possible workaround(using the geometry-library) to get "some points" to be able to create a polygon that looks like a circle:

Use the method `google.maps.geometry.spherical.computeOffset` in a loop with a incrementing heading:

  function circlePath(center, radius, points){
    var a=[],p=360/points,d=0;
    for(var i=0;i<points;++i,d+=p){
        a.push(google.maps.geometry.spherical.computeOffset(center,radius,d));
    }
    return a;
  }

The points-argument is the desired number of returned points.

The function returns an array suitable to be used as a polygon-path.

Demo: http://jsfiddle.net/doktormolle/NLHf9/

Problem

Here is below code..I want a circle to be drawn using Polygon function in Maps API V3 instead of using circle function in Google maps as I have to recreate some shapes on the circumferences of the circle like here http://textonly.in/docs/map7.html Whether there is anyway to get the points on the circumference of the circle? ``` var mapOptions = { zoom: 13, center: new google.maps.LatLng(45.512158914823035,-74.12200927734375), mapTypeId: google.maps.MapTypeId.TERRAIN }; var bermudaTriangle; var bermudaTriangle1; var rectangle; var citymap = {}; citymap['chicago'] = { center: new google.maps.LatLng(45.637839, -73.648316), }; var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); for (var city in citymap) { var populationOptions = { strokeColor: '#FF0000', strokeOpacity: 0.0, strokeWeight: 0, fillColor: '#FF0000', fillOpacity: 0.35, map: map, center: citymap[city].center, radius: 39 * 1000 }; // Add the circle for this city to the map. cityCircle = new google.maps.Circle(populationOptions); } ```

Original source