The coordinates of your markers will be getPointAt(center, radius, toRadians(45 * i)), where center represents the coordinates of the city center, radius is how far from the city center the markers will be displayed and i=1,7 (there are only 8 markers at a 45 degrees increment 45*8 = 360 and the first one is at 12’o clock). And toRadians function is implemented below.

toRadians = function(degrees) {

return degrees * Math.PI / 180;

};

Thanks for this calculator! We use it to draw markers on a google map in order of a circle, around a city. It works, except for the fact that our markers are drawn together as an oval, not as a nice round circle??

We use the getPointAt() function you describe, with a static center and radius, the only difference is the angle, which we increment by a loop like this: 45 + (45 * n) (n for every marker).

Both the radius and the angle seem to differ per marker so it places them in an oval, not a circle. Changing the radius to 30 degrees for example also creates an oval so that makes no difference.

Can you help us out? Thanks!

]]>And for everyone else reading this post, Meghan is one of the great UX designers working on the project detailed above.

]]>