Create Polygon On Google Map

[script type="text/javascript"]

function gob(e){
if(typeof(e)=='object')
return(e);
if(document.getElementById)
return(document.getElementById(e));
return(eval(e))
}

var map;
var toolID = 1;
var codeID = 2;
var shapeID = 1;
var polyShape;
var holeShape = new Array();

var ph = 0;
var polygonMode = false;
var markerMode = false;
var circlemode = false;
var rectanglemode = false;
var holemode = false;

var mylistener;
var editlistener = null;
var holelistener = new Array();
var editing = false;
var holeediting = false;
var notext = false;
var polygonDepth = "0";
var polyPoints = new Array();
var holePoints = new Array();
var holesarray = new Array();
var encpoints = new Array();
var encarray = new Array();
var holecoords = new Array();
var holebuilding;
var tinymarker;
var geocoder = null;

var mousemovepoint;
var editingstyles = 0;
var header = "";

var cur = 0;
var plmcur = 0;
var polygonstyles = new Array();
var polylinestyles = new Array();
var placemarks = new Array();
var polygonholes = new Array();
var centerMarker = null;
var radiusMarker = null;
var markerissaved = true;
var lookatsaved = false;

var tinyIcon = new GIcon();
tinyIcon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
tinyIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
tinyIcon.iconSize = new GSize(12,20);
tinyIcon.shadowSize = new GSize(22,20);
tinyIcon.iconAnchor = new GPoint(6,20);
tinyIcon.infoWindowAnchor = new GPoint(5,1);

var markerOptions = {icon:tinyIcon};


function polystyle() {
this.name = "rangecolour";
this.kmlcolor = "660000FF";
this.kmlfill = "660000FF";
this.color = "#FF0000";
this.fill = "#FF0000";
this.width = 0.1;
this.lineopac = .4;
this.fillopac = .4;
this.fillonoff = 1;
this.lineonoff = 1;
}
function linestyle() {
this.name = "linecolour";
this.kmlcolor = "660000FF";
this.color = "#FF0000";
this.width = 3;
this.lineopac = .4;
}
function placemarkobject() {
this.name = "distribution/range";
this.desc = "";
this.polygonstyle = "rangecolour";
this.linestyle = "linecolour";
this.curstyle = 0;
this.tess = 1;
this.alt = "clampToGround";
this.plmtext = "";
this.jstext = "";
this.toolID = 1;
this.hole = 0;
this.ID = 0;
}


function createstyleobjects() {
var polygonstyle = new polystyle();
polygonstyles.push(polygonstyle);
var polylinestyle = new linestyle();
polylinestyles.push(polylinestyle);
}
function createplacemarkobject() {
var thisplacemark = new placemarkobject();
placemarks.push(thisplacemark);
}
function load() {
if(GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"), {draggableCursor:'default',draggingCursor:'pointer'});
map.setCenter(new GLatLng(45.0,7.0),3);
var customUI = map.getDefaultUI();
customUI.controls.maptypecontrol = false;
customUI.controls.menumaptypecontrol = true;
map.setUI(customUI);
mylistener = GEvent.addListener(map,'click',mapClick);
geocoder = new GClientGeocoder();
GEvent.addListener(map,"mousemove",function(point){
mousemovepoint = point;
var LnglatStr6 = point.lng().toFixed(6) + ', ' + point.lat().toFixed(6);
var latLngStr6 = point.lat().toFixed(6) + ', ' + point.lng().toFixed(6);
});
GEvent.addListener(map,"zoomend",mapzoom);
createstyleobjects();
createplacemarkobject();

}
}

function mapClick(section, clickedPoint){
if(section == null) pushpoint(clickedPoint);
}

function pushpoint(point){
polyPoints.push(point);
drawCoordinates();
}

function closePoly(){
if(polyPoints.length > 2) polyPoints.push(polyPoints[0]);
drawCoordinates();
}

function drawCoordinates(){

if(polyPoints.length > 0){

if(tinymarker) map.removeOverlay(tinymarker);
if(polygonstyles[cur].lineonoff == 0) polygonstyles[cur].color = polygonstyles[cur].fill;

polyShape = new GPolyline(polyPoints,polylinestyles[cur].color,polylinestyles[cur].width,polylinestyles[cur].lineopac);
tinymarker = new GMarker(polyPoints[0], markerOptions);
map.addOverlay(tinymarker);


map.addOverlay(polyShape);
logCoordinates();
}
}

function logCoordinates(){
var j = polyPoints.length;
var plmtext = "";
var coords1 = coords2 = "";
if (notext == false && (j > 0)){
var linefooter;
var lineheader;

placemarks[plmcur].toolID = 1;
plmtext = lineheader;
for (var i=0; i var lat = polyPoints[i].lat();
var longi = polyPoints[i].lng();
coords1 += roundVal(longi) + " " + roundVal(lat) + ",$";
plmtext += roundVal(longi) + " " + roundVal(lat) + ",$";
}
placemarks[plmcur].ID = polyPoints[0].lng().toFixed(3);
plmtext += linefooter;
if(codeID == 2) coo.value = coords1 + coords2;
plmtext = "";
coords1 = coords2 = "";

}
}
function mapzoom(){
var mapZoom = map.getZoom();

}
function mapcenter(){
var mapCenter = map.getCenter();
var latLngStr6 = mapCenter.lat().toFixed(6) + ', ' + mapCenter.lng().toFixed(6);
gob("centerofmap").value = latLngStr6;
}



function showCode(){

var j = polyPoints.length;
var k = holePoints.length;
var pweight = polygonstyles[cur].width;
var lweight = polylinestyles[cur].width;
coo.value = "var points =\n[\n";
if (markerMode) {
if(polyPoints.length > 1) createmarker(polyPoints[0]);
var lat = polyPoints[0].lat();
var longi = polyPoints[0].lng();
coo.value += "new GLatLng(" + roundVal(lat) + "," + roundVal(longi) + ")";

}
coo.value +="\n];\n";
coo.value +="var polyline = new GPolyline(points,'" + polylinestyles[cur].color + "'," + lweight + "," + polylinestyles[cur].lineopac + ");\n";
coo.value +="map.addOverlay(polyline);";

}

function roundVal(val){
if(val.toString().length < 9){
return val;
}else{
var dec = 6;
var result = Math.round(val*Math.pow(10,dec))/Math.pow(10,dec);
return result;
}
}



[/script]
[body onload="load()" onunload="GUnload()"]
[form id="form1" runat="server"]
[table id="toptable"]
[tr]
[td]
[input type="button" onclick="closePoly();" value="Close Polyshape" id="CloseButton" /]
[/td]
[/tr]
[tr]
[td]
[div id="map" style="width: 819px; height: 650px"]
[/div]
[/td]
[/tr]
[tr]
[td]
[div id="status"]
[asp:TextBox ID="coords" runat="server" TextMode="MultiLine" Height="450px" Width="200px"][/asp:TextBox]
[/div]
[/td]
[/tr]
[/table]
[script type="text/javascript"]
var coo = gob('coords')
[/script]

[/form]
[/body]
[/html]