原创 Draw rect and round with google map v3

The topic is to dicuss how to draw rect and round under google map java-script. As we know, there are many resource about the two items. But``` it seems that most of them are written by google map v2. So we do this job with google map v3 as follow:

1. Drawing rect:
(1) Rule: It is simple to follow the sample "Bermuda Triangle", which is from google map v3 guide: http://code.google.com/intl/zh-CN/apis/maps/documentation/v3/overlays.html#Polygons

(2) Our sample source:

var rectRegion;
// parameter: rect cornerA(base pos): lng1/lat1; cornerB(mouse pos): lng2/lat2
// type: 0x00: refresh(default); 0x01: add rect and set center of map
function drawSingleRect(lng1, lat1, lng2, lat2, type) {
 if(type == 0) {
  if(rectRegion)
   rectRegion.setMap(null); 
 }
 else if(type == 1) {
  latlng = new google.maps.LatLng(lat1, lng1);
  map.setZoom(16);
  map.setCenter(latlng);
 }

 var rectCoords = [
  new google.maps.LatLng(lat1, lng1),
  new google.maps.LatLng(lat1, lng2),
  new google.maps.LatLng(lat2, lng2),
  new google.maps.LatLng(lat2, lng1),
  new google.maps.LatLng(lat1, lng1)
 ];

 rectRegion = new google.maps.Polygon({
  paths: rectCoords,
  strokeColor: "#FF0000",
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: "#FF0000",
  fillOpacity: 0.35
 });

 rectRegion.setMap(map);
}

(3) Realizing:

2. Drawing circle:
(1) Rule:
The round is polyron also. If we calc enough points at the circle, then we can build the "circle" polyron. And we found the math rule with center lng/lat and radius from: http://maps.forum.nu/gm_sensitive_circle2.html, whose author is Marcelo Montagna. At fact, Marcelo's code run some slowly because of many sin/cos/atan and so on? Then we do little modification for quick it.
The other item is how to read the radius between two marker. The excellent job we found is from: http://www.barattalo.it/2009/12/19/ruler-for-google-maps-v3-to-measure-distance-on-map/, the author is Giulio Pons. With Giulio's source we built a ruler also.

(2) Our sample Source:
Like the drawing rect, we simulate the paths parameter of polygon, which is the marker array calced by Marcelo's rule, then do setMap(). Everything seems ok.

var roundRegion;
// parameter: center pos: lng1/lat1; mouse pos: lng2/lat2
// type: 0x00: refresh(default); 0x01: add round and set center of map
function drawSingleRound(lng1, lat1, lng2, lat2, type) {

 radius = distance(lat1, lng1, lat2, lng2); // unit: m
 drawSingleRoundwithRadius(lng1, lat1, radius, type);
}

function drawSingleRoundwithRadius(lng1, lat1, radius, type) {
 if(type == 0) {
  if(roundRegion)
   roundRegion.setMap(null); 
 }
 else if(type == 1) {
  latlng = new google.maps.LatLng(lat1, lng1);
  map.setZoom(16);
  map.setCenter(latlng);
 }
 
 var d = radius/6378800;
 var roundCoords = [];

 var bequick1 = Math.PI/180;
 var bequick2 = 180/Math.PI;
 lat1 = bequick1* lat1;
 lng1 = bequick1* lng1;
 var bequick3 = Math.sin(lat1);
 var bequick4 = Math.cos(lat1);
 var bequick5 = Math.sin(d);
 var bequick6 = Math.cos(d);
 for (var a = 0 ; a < 361 ; a++) {
  var tc = bequick1*a;
  var y = Math.asin(bequick3*bequick6+bequick4*bequick5*Math.cos(tc));
  var dlng = Math.atan2(Math.sin(tc)*bequick5*bequick4, bequick6-bequick3*Math.sin(y));
  var x = ((lng1-dlng+Math.PI) % (2*Math.PI)) - Math.PI ; // MOD function
  var point = new google.maps.LatLng(parseFloat(y*bequick2), parseFloat(x*bequick2));
  roundCoords.push(point);
 }

 roundRegion = new google.maps.Polygon({
  paths: roundCoords,
  strokeColor: "#FF0000",
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: "#FF0000",
  fillOpacity: 0.35
 });

 roundRegion.setMap(map);
}

// return delta with unit meter
function distance(lat1,lon1,lat2,lon2) {
 var R = 6371; // km (change this constant to get miles)
 var dLat = (lat2-lat1) * Math.PI / 180;
 var dLon = (lon2-lon1) * Math.PI / 180;
 var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
  Math.cos(lat1 * Math.PI / 180 ) * Math.cos(lat2 * Math.PI / 180 ) *
  Math.sin(dLon/2) * Math.sin(dLon/2);
 var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
 var d = R * c;
 //if (d>1) return Math.round(d)+"km";
 //else if (d<=1) return Math.round(d*1000)+"m";
 if (d>1) return Math.round(d)*1000;
 else if (d<=1) return Math.round(d*1000);
 //return d;
}

(3) Realizing: