Holes in a Polygon

I added this polygon code from this website: http://www.geocodezip.com/v3_polygon_example_donut.html

There is an issue though, the radius is not accurate. So if I measure the distance between 2 cities, then draw this circle, it is way off, and gets worse the larger the circle.

Any ideas?

<script type="text/javascript"> 
function drawCircle(point, radius, dir) { 
var d2r = Math.PI / 180;   // degrees to radians 
var r2d = 180 / Math.PI;   // radians to degrees 
var earthsradius = 3959; // 3959 is the radius of the earth in SM

   var points = 1000; 

   // find the raidus in lat/lon 
   var rlat = (radius / earthsradius) * r2d; 
   var rlng = rlat / Math.cos(point.lat() * d2r); 


   var extp = new Array(); 
   if (dir==1)  {var start=0;var end=points+1} // one extra here makes sure we connect the
   else     {var start=points+1;var end=0}
   for (var i=start; (dir==1 ? i < end : i > end); i=i+dir)  
   { 
  var theta = Math.PI * (i / (points/2)); 
  ey = point.lng() + (rlng * Math.cos(theta)); // center a + radius x * cos(theta) 
  ex = point.lat() + (rlat * Math.sin(theta)); // center b + radius y * sin(theta) 
  extp.push(new google.maps.LatLng(ex, ey)); 
  bounds.extend(extp[extp.length-1]);
   } 
   // alert(extp.length);
   return extp;
   }

    var map = null;
    var bounds = null;

    function initialize() {
  var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(29.10860062, -95.46209717),
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  }
  map = new google.maps.Map(document.getElementById("map_canvas"),
                            myOptions);

  bounds = new google.maps.LatLngBounds();

  var donut = new google.maps.Polygon({
             paths: [triangleCoords = [
                        new google.maps.LatLng(-87, 120), 
                        new google.maps.LatLng(-87, -87), 
                        new google.maps.LatLng(-87, 0)],
                     drawCircle(new google.maps.LatLng(29.10860062, -95.46209717), 2000, -1)],";
 
             strokeColor: "#000000",
             strokeOpacity: 0.6,
             strokeWeight: 2,
             fillColor: "#999999",
             fillOpacity: 0.6
 });
 donut.setMap(map);

 map.fitBounds(bounds);


</script>

Solution

A better circle-drawing routine may be found by using the "point from bearing" calculations at http://www.movable-type.co.uk/scripts/latlong.html#destPoint

θ is the bearing (in radians, clockwise from north); d/R is the angular distance (in radians), where d is the distance travelled and R is the earth’s radius

var lat2 = Math.asin( Math.sin(lat1)*Math.cos(d/R) + 
              Math.cos(lat1)*Math.sin(d/R)*Math.cos(brng) );
var lon2 = lon1 + Math.atan2(Math.sin(brng)*Math.sin(d/R)*Math.cos(lat1), 
                     Math.cos(d/R)-Math.sin(lat1)*Math.sin(lat2));

Converting everything to radians and making sure that d and R are both expressed in the same units, we get a circle-drawing routine like this

function drawCircle(point, radius, dir, addtoBounds) { 
var d2r = Math.PI / 180;   // degrees to radians 
var r2d = 180 / Math.PI;   // radians to degrees 
var earthsradius = 6371000; // 3959 is the radius of the earth in SM

   var points = 1000; 

   // find the raidus in lat/lon 
   var rlat = (radius / earthsradius) * r2d; 
   var rlng = rlat / Math.cos(point.lat() * d2r); 


   var extp = new Array(); 
   if (dir==1)  {var start=0;var end=points+1} // one extra here makes sure we connect the
   else     {var start=points+1;var end=0}
   for (var i=start; (dir==1 ? i < end : i > end); i=i+dir)  
   { 
      var theta = Math.PI * (i / (points/2)); 
    var lat1=point.lat()*d2r;
    var lon1=point.lng()*d2r;
    var d=radius;
    var R=earthsradius;

    var ex = Math.asin( Math.sin(lat1)*Math.cos(d/R) + 
              Math.cos(lat1)*Math.sin(d/R)*Math.cos(theta) );
    var ey = lon1 + Math.atan2(Math.sin(theta)*Math.sin(d/R)*Math.cos(lat1), 
                     Math.cos(d/R)-Math.sin(lat1)*Math.sin(ex));
      extp.push(new google.maps.LatLng(ex*r2d, ey*r2d)); 
      if (addtoBounds) bounds.extend(extp[extp.length-1]);
   } 
   // alert(extp.length);
   return extp;
   }

I have an example at http://www.acleach.me.uk/gmaps/v3/mapsearch.htm where the centre is at CYQX and there's another marker at EINN and a circle of 1715NM radius (expressed as 3176180m). Other circles have been added at radii of 500, 1000, 1500, 2000 and 2500NM.

I've also added a geodesic line between the two points. This crosses the circles at right-angles as expected, which is a check on the accuracy of the circle calculation.