Converting Google maps dynamic and resizing circle v2 to v3 - google-maps

Question

http://web3o.blogspot.in/2010/05/google-maps-dynamically-movable-and.html
From the above link i got V2 google maps code which is working fine, but not able to import V3 beach markers so i convert the draw circle, circle resize and circle center marker function to V3 and i am not getting the circle in the maps where as i am getting all the marker, beach marker flags etc.
Following is the code, Kindly help me in fixing this, save the code as HTML file and execute in the browser.
I am having issue in the drawCircle function were the circle is not drawn on the Map.
<!--<script src="http://maps.google.com/maps?file=api&v=2&key=AIzaSyDAAkI8Q59oV68_F8r8hL66vlhCu9cWNQM&sensor=true" type="text/javascript"></script>-->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&v=3&libraries=geometry"></script>
<script type="text/javascript">
/* Developed by: Abhinay Rathore [web3o.blogspot.com] */
//Global variables
var map;
var circle = [];
//circle[0] = {map_center: new GLatLng(38.903843, -94.680096),
// };
var Cobj = [];//{'mp_center':
var frndmap = [];
var bounds = new google.maps.LatLngBounds; //Circle Bounds
var map_center = new google.maps.LatLng(12.9735597, 77.6410402);
frndmap = [['Mahesh Pusala', 12.9735521, 77.6410431, 1], ['Bala Sundar', 12.9735567, 77.6410489, 2]];
var Circle=[];//null,null];//Circle object
var CirclePoints = []; //Circle drawing points
var CircleCenterMarker, CircleResizeMarker = [];//null,null];
var circle_moving = false; //To track Circle moving
var circle_resizing = false; //To track Circle resizing
var radius = []; //1 km
//var min_radius = 0.5; //0.5km
//var max_radius = 50; //5km
//Circle Marker/Node icons
/*var redpin = new google.maps.MarkerImage(); //Red Pushpin Icon
redpin.image = "http://maps.google.com/mapfiles/ms/icons/red-pushpin.png";
redpin.iconSize = new google.maps.Size(32, 32);
redpin.iconAnchor = new google.maps.Point(10, 32);*/
var redpin = new google.maps.MarkerImage('http://maps.google.com/mapfiles/ms/icons/red-pushpin.png',
// This marker is 20 pixels wide by 32 pixels tall.
new google.maps.Size(32, 32),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
new google.maps.Point(10, 32));
/*var bluepin = new google.maps.MarkerImage(); //Blue Pushpin Icon
bluepin.image = "http://maps.google.com/mapfiles/ms/icons/blue-pushpin.png";
bluepin.iconSize = new google.maps.Size(32, 32);
bluepin.iconAnchor = new google.maps.Point(10, 32);*/
var bluepin = new google.maps.MarkerImage('http://maps.google.com/mapfiles/ms/icons/blue-pushpin.png',
// This marker is 20 pixels wide by 32 pixels tall.
new google.maps.Size(32, 32),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
new google.maps.Point(10, 32));
function initialize() { //Initialize Google Map
//for(c in circle) {
//map = new GMap2(document.getElementById("map_canvas")); //New GMap object
var myOptions = {
zoom: 14,
center: map_center,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
/*addCircleResizeMarker(map_center[0], '0');
addCircleCenterMarker(map_center[0],'0');
drawCircle(map_center[0], radius, '0');
addCircleCenterMarker(map_center[1],'1');
addCircleResizeMarker(map_center[1], '1');
drawCircle(map_center[1], radius, '1');
*/
for(i=0; i<3; i++) {
Cobj[i] = {'map_center':new google.maps.LatLng(12.9735597+i, 77.6410402+i),
'Circle':null,
'CircleResizeMarker':null,
'radius':24+i
};
addCircleCenterMarker(i);
addCircleResizeMarker(i);
drawCircle(Cobj[i].map_center,Cobj[i].radius, i);
}
map.setCenter(map_center);
setMarkers(map, frndmap);
}
// Adds Circle Center marker
//radius
function addCircleCenterMarker(iii) {
point = Cobj[iii].map_center;
var markerOptions = { icon: bluepin, draggable: true };
CircleCenterMarker = new google.maps.Marker(point, markerOptions);
CircleCenterMarker.setMap(map); //Add marker on the map
//X= new google.maps.event();
google.maps.event.addListener(CircleCenterMarker, 'dragstart', function() { //Add drag start event
circle_moving = true;
});
google.maps.event.addListener(CircleCenterMarker, 'drag', function(point) { //Add drag event
drawCircle(point,Cobj[iii].radius, iii);
});
google.maps.event.addListener(CircleCenterMarker, 'dragend', function(point) { //Add drag end event
console.log(point.lng());
circle_moving = false;
drawCircle(point, Cobj[iii].radius, iii);
});
}
// Adds Circle Resize marker
// map_center
function addCircleResizeMarker(iii) {
point = Cobj[iii].map_center;
var resize_icon = new google.maps.MarkerImage(redpin);
resize_icon.maxHeight = 0;
var markerOptions = { icon: resize_icon, draggable: true };
Cobj[iii].CircleResizeMarker = new google.maps.Marker(point, markerOptions);
Cobj[iii].CircleResizeMarker.setMap(map); //Add marker on the map
google.maps.event.addListener(Cobj[iii].CircleResizeMarker, 'dragstart', function() { //Add drag start event
circle_resizing = true;
});
google.maps.event.addListener(Cobj[iii].CircleResizeMarker, 'drag', function(point) { //Add drag event
var new_point = new google.maps.LatLng(Cobj[iii].map_center.lat(), point.lng()); //to keep resize marker on horizontal line
var new_radius = new_point.distanceFrom(Cobj[iii].map_center) / 1000; //calculate new radius
//if (new_radius < min_radius) new_radius = min_radius;
//if (new_radius > max_radius) new_radius = max_radius;
drawCircle(Cobj[iii].map_center, new_radius, iii);
});
google.maps.event.addListener(Cobj[iii].CircleResizeMarker, 'dragend', function(point) { //Add drag end event
circle_resizing = false;
var new_point = new google.maps.LatLng(Cobj[iii].map_center.lat(), point.lng()); //to keep resize marker on horizontal line
var new_radius = new_point.distanceFrom(Cobj[iii].map_center) / 1000; //calculate new radius
//if (new_radius < min_radius) new_radius = min_radius;
//if (new_radius > max_radius) new_radius = max_radius;
console.log(new_radius);
drawCircle(Cobj[iii].map_center, new_radius, iii);
});
}
//Draw Circle with given radius and center
function drawCircle(center,new_radius, iii) {
//Circle = Circle[iii];
//Circle Drawing Algorithm from: http://koti.mbnet.fi/ojalesa/googlepages/circle.htm
//Number of nodes to form the circle
var nodes = new_radius * 40;
if(new_radius < 1) nodes = 40;
//calculating km/degree
xx = new google.maps.LatLng(center.lat() + 0.1, center.lng());
yy = new google.maps.LatLng(center.lat() , center.lng()+0.1);
var latConv = google.maps.geometry.spherical.computeDistanceBetween(center,xx)/100;//center.distanceFrom(new google.maps.LatLng(center.lat() + 0.1, center.lng())) / 100;
var lngConv = google.maps.geometry.spherical.computeDistanceBetween(center,yy)/100;//center.distanceFrom(new google.maps.LatLng(center.lat(), center.lng() + 0.1)) / 100;
CirclePoints = [];
var step = parseInt(360 / nodes) || 10;
var counter = 0;
for (var i = 0; i <= 360; i += step) {
var cLat = center.lat() + (new_radius / latConv * Math.cos(i * Math.PI / 180));
var cLng = center.lng() + (new_radius / lngConv * Math.sin(i * Math.PI / 180));
var point = new google.maps.LatLng(cLat, cLng);
CirclePoints.push(point);
counter++;
}
Cobj[iii].CircleResizeMarker.setPosition(CirclePoints[Math.floor(counter / 4)]); //place circle resize marker
CirclePoints.push(CirclePoints[0]); //close the circle polygon
if (Cobj[iii].Circle) {
//map.removeOverlay(Cobj[iii].Circle);
marker.setMap(null);
} //Remove existing Circle from Map
var fillColor = (circle_resizing || circle_moving) ? 'red' : 'blue'; //Set Circle Fill Color
console.log(CirclePoints);
Cobj[iii].Circle = new google.maps.Polygon(CirclePoints, '#FF0000', 2, 1, fillColor, 0.2); //New GPolygon object for Circle
//Cobj[iii].Circle.setMap(map); //Add Circle Overlay on the Map
//radius = new_radius; //Set global radius
//Cobj[iii].map_center = center; //Set global map_center
//if (!circle_resizing && !circle_moving)
//{
//Fit the circle if it is nor moving or resizing
// fitCircle(Cobj[iii].Circle);
//Circle drawing complete trigger function goes here
//}
}
//Fits the Map to Circle bounds
function fitCircle(Circle) {
bounds = Circle.getBounds();
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
}
function setMarkers(map, locations) {
// Add markers to the map
// Marker sizes are expressed as a Size of X,Y
// where the origin of the image (0,0) is located
// in the top left of the image.
// Origins, anchor positions and coordinates of the marker
// increase in the X direction to the right and in
// the Y direction down.
var image = {
url: 'images/beachflag.png',
// This marker is 20 pixels wide by 32 pixels tall.
size: new google.maps.Size(20, 32),
// The origin for this image is 0,0.
origin: new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
anchor: new google.maps.Point(0, 32)
};
var shadow = {
url: 'images/beachflag_shadow.png',
// The shadow image is larger in the horizontal dimension
// while the position and offset are the same as for the main image.
size: new google.maps.Size(37, 32),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(0, 32)
};
// Shapes define the clickable region of the icon.
// The type defines an HTML <area> element 'poly' which
// traces out a polygon as a series of X,Y points. The final
// coordinate closes the poly by connecting to the first
// coordinate.
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
shadow: shadow,
icon: image,
shape: shape,
title: beach[0],
zIndex: beach[3]
});
}
}
</script>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:450px"></div>
</body>

Answer 1

Your drawCircle function has
Cobj[iii].Circle = new google.maps.Polygon(CirclePoints, '#FF0000', 2, 1, fillColor, 0.2); //New GPolygon object for Circle
Personally I'd rather use google.maps.Circle instead, much simpler
https://developers.google.com/maps/documentation/javascript/reference#Circle