I created a circle using the Google Maps V3 API and also tried to make a circle of markers with the same radius.

Problem: The one I created is oblique while the one by Google Maps is a nice round circle. What went wrong?

Google Maps V3 Circle Code

// Draw search circle
search_circle = new google.maps.Circle;
search_circle.setCenter(target_latlng);
search_circle.setRadius(travel_time * average_speed);
search_circle.setMap(map);

I created a circle using the Google Maps V3 API and also tried to make a circle of markers with the same radius.

Problem: The one I created is oblique while the one by Google Maps is a nice round circle. What went wrong?

Google Maps V3 Circle Code

// Draw search circle
search_circle = new google.maps.Circle;
search_circle.setCenter(target_latlng);
search_circle.setRadius(travel_time * average_speed);
search_circle.setMap(map);

• javascript
• jquery
• google-maps
• google-maps-api-3
• gis

2 Answers 2

One thing you need to remember here, the google circle is giving the distance between two points on a sphere (the earth) which is why your circle doesn't look the same.

You did not specify what the purpose of the circle in your example is, but from the code snippet I can tell it has something to do with travel distances. In that case you might be interested to look into :

The Haversine Formula

or

The Spherical Law of Cosines

Also this page could provide you with some basis on how to tweak your formula to get the correct circle shape.

Edit: For the sake of correctness, the earth is not a perfect sphere, but for all practical purposes it is assumed to be one.

To calculate distances on a sphere, you can utilize Google Maps geometry library. To request the library use:

<script type="text/javascript" src="http://maps.googleapis./maps/api/js?libraries=geometry&sensor=true_or_false"></script>

Then, your circle JS code would be:

num_theta_step = 365;               // number of steps
for(theta = 0; theta < 365; theta += 365/num_theta_step) {                        
   var circle_latlng = google.maps.geometry.spherical.puteOffset(target_latlng, R, theta);
   var marker = new google.maps.Marker({
      position: circle_latlng,
      map: map,
      title:"Hello World!"
   });
}