Polygon in the form of a circle.

411 views
Skip to first unread message

sepoto

unread,
Jul 4, 2011, 2:48:15 PM7/4/11
to google-map...@googlegroups.com
I need to draw a circle and shade it to represent the radius map I am working with. Is this possible to do with api v3?

Rossko

unread,
Jul 4, 2011, 6:06:57 PM7/4/11
to Google Maps JavaScript API v3

John Coryat

unread,
Jul 4, 2011, 10:49:32 PM7/4/11
to google-map...@googlegroups.com
Be aware that a circle will not define a radius properly. Since the map stretches the latitude in relation to the longitude, a circle will be (as a unit measurement) have different dimensions in the north-south direction as opposed to the east-west direction. If you want to represent a radius on the map, you'll need to use a polygon with correctly defined coordinates. Not difficult but harder than a plain circle.

The circle function (google.maps.Circle) doesn't handle this issue correctly. Circles should appear "egg" shaped on the map, especially at higher latitudes. Instead, they appear perfectly circular, so they are not truly defined by meters as the documentation states. 

This may not matter in your application but I suggest keeping it in mind in case you find your results are confusing.

-John Coryat


Ben Appleton

unread,
Jul 4, 2011, 10:52:33 PM7/4/11
to google-map...@googlegroups.com
Hi John,

google.maps.Circle correctly handles radius. Large circles do appear "egg" shaped on the map as you describe.

Cheers
Ben

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-maps-js-api-v3/-/i4dKtBnKzaQJ.

To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.

John Coryat

unread,
Jul 4, 2011, 11:01:12 PM7/4/11
to google-map...@googlegroups.com
Ben,


This should be a hugely exaggerated circle but it's not.

Am I missing something?

-John Coryat

Ben Appleton

unread,
Jul 4, 2011, 11:46:52 PM7/4/11
to google-map...@googlegroups.com
Hey John,

In a JS debugger I modified one of your circles' radii to 1000km and took a screenshot (attached). The resulting circle contains the North pole. It's clearly not a screen circle. Is this what you mean?

Cheers
Ben

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
circle_screenshot.png

John Coryat

unread,
Jul 5, 2011, 12:21:42 AM7/5/11
to google-map...@googlegroups.com
Ben,

According to my calculations, it should look like this:


The circle is overlaid by what should be a more egg shaped polygon. This is an approximately 200 mile radius circle. Pardon the crudeness of the polygon. My math may be incorrect though.

-John

John Coryat

unread,
Jul 5, 2011, 12:25:41 AM7/5/11
to google-map...@googlegroups.com
Ben,

I'm guessing by the look of the v3 function circle that there are less points involved in calculating the shape than I used. Except in extremely rare circumstances, like dealing with very high or low latitudes, your calculation would be indistinguishable from what I use.

-John

Ben Appleton

unread,
Jul 5, 2011, 12:33:56 AM7/5/11
to google-map...@googlegroups.com
Hey John,

Interesting: I agree your circles differ from ours. We currently use 500 vertices, computing LatLng for each using google.maps.spherical.computeOffset:
http://code.google.com/apis/maps/documentation/javascript/reference.html#spherical
then projecting to pixel coordinates using the Map's projection (Google's Mercator).

We could have a bug, though I would have thought our tests would catch that. I'll have to look into it.

Thanks
Ben

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.

Karthik Reddy

unread,
Jul 5, 2011, 10:23:44 AM7/5/11
to google-map...@googlegroups.com

function getCirclePoints(center,radius){

var circlePoints = Array();

var searchPoints = Array();

var bounds = new google.maps.LatLngBounds();

with (Math) {

var rLat = (radius/3963.189) * (180/PI); // miles

var rLng = rLat/cos(center.lat() * (PI/180));

for (var a = 0 ; a < 361 ; a++ ) {

var aRad = a*(PI/180);

var x = center.lng() + (rLng * cos(aRad));

var y = center.lat() + (rLat * sin(aRad));

var point = new google.maps.LatLng(parseFloat(y),parseFloat(x),true);

circlePoints.push(point);

bounds.extend(point);

if (a % pointInterval == 0) {

searchPoints.push(point);

}

}

}

searchPolygon = new google.maps.Polygon({

paths: circlePoints, 

strokeColor: '#0000ff'

strokeOpacity: 1

strokeWeight: 1

fillColor: '#0000ff'

fillOpacity: 0.2

});

searchPolygon.setMap(map);

map.fitBounds(bounds);

//map.setCenter(searchPolygon.getBounds().getCenter(),map.getBoundsZoomLevel(searchPolygon.getBounds()));

return searchPoints;

}

Enoch Lau

unread,
Jul 5, 2011, 5:45:24 PM7/5/11
to google-map...@googlegroups.com
If you calculate the distance from the circle's center LatLng to the manually calculated circle points (in cirCoords), you'll notice that they don't have a consistent distance - those manually calculated points don't form a circle.

Enoch Lau

unread,
Jul 5, 2011, 5:48:14 PM7/5/11
to google-map...@googlegroups.com
This code calculates a circle in lat-lng space, which won't appear circular on-screen (using the mercator projection), nor is a spherical cap.

f201...@dubai.bits-pilani.ac.in

unread,
Jun 11, 2018, 7:35:46 PM6/11/18
to [deprecated] Google Maps JavaScript API v3. Please use the latest post.
" var rLat = (radius/3963.189) * (180/PI)"

Can anyone explain how did we come up with this rlat formula
and what value does radius/earth's radius gives
Reply all
Reply to author
Forward
0 new messages