basicw_circle.htm - gmaps-samples - Google Maps API Samples

Source path: svn/ trunk/ basic_wcircle/ basicw_circle.htm

‹r2416

r2688

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> 
  <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <title>Google Maps JavaScript API Example</title> 
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxSPW5CJgpdgO_s4yyMovOaVh_KvvhSfpvagV18eOyDWu7VytS6Bi1CWxw"
            type="text/javascript"></script>
    <script type="text/javascript"> 
    //<![CDATA[ 
    // Taken from Kip, Modified by Pamela Fox & Dave Parsons
    var map;

    /**
     * Add a circle to the global variable "map". This function won't work for circles that encompass
     * the North or South Pole. Also, there is a slight distortion in the upper-left, upper-right,
     * lower-left, and lower-right sections of the circle that worsens as it gets larger and/or closer
     * to a pole.
     * @param lat Latitude in degrees
     * @param lng Longitude in degrees
     * @param radius Radius of the circle in statute miles
     * @param {String} strokeColor Color of the circle outline in HTML hex style, e.g. "#FF0000"
     * @param strokeWidth Width of the circle outline in pixels
     * @param strokeOpacity Opacity of the circle outline between 0.0 and 1.0
     * @param {String} fillColor Color of the inside of the circle in HTML hex style, e.g. "#FF0000"
     * @param fillOpacity Opacity of the inside of the circle between 0.0 and 1.0
     */
    function drawCircle(lat, lng, radius, strokeColor, strokeWidth, strokeOpacity, fillColor, fillOpacity) {
      var d2r = Math.PI/180;
      var r2d = 180/Math.PI;
      var Clat = radius * 0.014483;  // Convert statute miles into degrees latitude
      var Clng = Clat/Math.cos(lat*d2r); 
      var Cpoints = []; 
      for (var i=0; i < 33; i++) { 
        var theta = Math.PI * (i/16);
        Cy = lat + (Clat * Math.sin(theta));
        Cx = lng + (Clng * Math.cos(theta));
        var P = new GLatLng(Cy, Cx);
        Cpoints.push(P);
      }

      var polygon = new GPolygon(Cpoints, strokeColor, strokeWidth, strokeOpacity, fillColor, fillOpacity);
      map.addOverlay(polygon);
     }

    function load() { 
      map = new GMap2(document.getElementById("map")); 
      map.setCenter(new GLatLng(53.479874, -2.246704), 9); 
      drawCircle(53.479874, -2.246704, 10.0, "#000080", 1, 0.75, "#0000FF",.5);   
    } 
    //]]> 
    </script> 
  </head> 
  <body onload="load()" onunload="GUnload()"> 
    <div id="map" style="width: 650px; height: 500px"></div> 
  </body> 
</html>