MiCR01

Anyone?

I think i am close? <script type="text/javascript">var map; var polyShape; var markers = []; var drag_poly = false; var mouseDownPos; var oldVertexPos; var toplace = [new google.maps.LatLng(52.63586014925004, 1.2875261303270236),new google.maps.LatLng(52.63888119537785, 1.3024606701219454),new google.maps.LatLng(52.632838894493, 1.325119971879758),new google.maps.LatLng(52.626587360201505, 1.314305305131711),new google.maps.LatLng(52.62294021941067, 1.304520606645383),new google.maps.LatLng(52.62585795635695, 1.2856378551805392),new google.maps.LatLng(52.6309635279822, 1.303147315629758),new google.maps.LatLng(52.63190122128495, 1.281174659379758)]; function createMarker(g) { var f = google.maps; var h = function (a) { return { url: a, size: new f.Size(11, 11), anchor: new f.Point(5, 5) } }; var e = new f.Marker({ position: g, map: map, icon: h("/images/google_maps/square.png"), raiseOnDrag: false, draggable: true }); markers.push(e); f.event.addListener(e, "mouseover", function () { e.setIcon(h("/images/google_maps/m-over-square.png")) }); f.event.addListener(e, "mouseout", function () { e.setIcon(h("/images/google_maps/square.png")) }); f.event.addListener(e, "drag", function (a) { for (var b = 0, d; d = markers[b]; b++) { if (d == e) { var c = a.latLng; break } } polyShape.getPath().setAt(b, c); showValues() }); f.event.addListener(e, "click", function () { for (var a = 0, b; b = markers[a]; a++) { if (b == e) { b.setMap(null); markers.splice(a, 1); break } } polyShape.getPath().removeAt(a); showValues() }); return e } function movePoly(a) { if (drag_poly) { var b = a.latLng; var d = polyShape.getPath(); for (var c = 0, g; g = oldVertexPos[c]; c++) { var f = g.lat() + b.lat() - mouseDownPos.lat(); var h = g.lng() + b.lng() - mouseDownPos.lng(); var e = new google.maps.LatLng(f, h); d.setAt(c, e) } } } function startDrag(a) { var b = google.maps; drag_poly = true; mouseDownPos = a.latLng; oldVertexPos = []; for (var d = 0, c; c = markers[d]; d++) { oldVertexPos[d] = c.getPosition(); b.event.clearInstanceListeners(c); c.setMap(null) } markers.length = 0; map.setOptions({ draggable: false }); b.event.addListener(map, "mousemove", movePoly); if (window.event) { window.event.returnValue = false } a.stop() } function mouseUp() { if (drag_poly) { drag_poly = false; map.setOptions({ draggable: true }); google.maps.event.clearListeners(map, "mousemove"); var a = polyShape.getPath(); for (var b = 0; b < a.getLength(); b++) { createMarker(a.getAt(b)) } } } function setShape() { var a = google.maps; var b = { strokeColor: "#3355ff", strokeOpacity: .8, strokeWeight: 3, fillColor: "#335599", fillOpacity: .3, map: map }; polyShape = new a.Polygon(b); polyShape.listeners = [a.event.addListener(polyShape, "mousedown", startDrag), a.event.addListener(polyShape, "mousemove", movePoly)]; document.onmouseup = mouseUp } function showValues() { var a = document.getElementById("report"); var b = google.maps.geometry.spherical; var d = polyShape.getPath().getArray(); document.getElementById("paths").value = d; var c = b.computeArea(d, 6371); if (markers.length <= 2) { a.innerHTML = " " } else if (markers.length > 2) { a.innerHTML = c.toFixed(3) + " km²" } } function leftClick(a) { if (a.latLng) { if (!polyShape) setShape(); createMarker(a.latLng); polyShape.getPath().push(a.latLng); showValues() } } function buildMap() { var a = google.maps; var b = { center: new a.LatLng(52.6322568, 1.3127337), zoom: 12, zoom: 8, mapTypeId: a.MapTypeId.ROADMAP, draggableCursor: 'auto', draggingCursor: 'move', disableDoubleClickZoom: true, mapTypeControlOptions: { mapTypeIds: [a.MapTypeId.ROADMAP, a.MapTypeId.SATELLITE, a.MapTypeId.TERRAIN] }, panControl: false, zoomControlOptions: { style: a.ZoomControlStyle.SMALL } }; var poly = new google.maps.Polygon({ path: toplace, strokeWeight: 1, fillColor: '#55FF55', fillOpacity: 0.3 }); poly.setMap(map); map = new a.Map(document.getElementById("map"), b); setShape(); a.event.addListener(map, "click", leftClick); } function zoomToPoly() { if (polyShape && polyShape.getPath().getLength() > 1) { var b = new google.maps.LatLngBounds(); polyShape.getPath().forEach(function (a) { b.extend(a) }); map.fitBounds(b) } } function clearPoly() { var a = google.maps; for (var b = 0, d; d = markers[b]; b++) { a.event.clearInstanceListeners(d); d.setMap(null) } if (polyShape) { for (var c = 0, g; g = polyShape.listeners[c]; c++) { a.event.removeListener(g) } polyShape.setMap(null); polyShape = null } markers.length = 0; document.getElementById("report").innerHTML = " " } window.onload = buildMap; </script> <div id="map"></div> <table id="desc"> <tr><td> Click at least at three different places on the map to draw a polygon. <b>Try to drag the shape of the polygon.</b> The corners of the polygon are draggable and removable at any position. You can add and remove vertices simply by click. </td></tr> <tr><td> Area of polygon: </td></tr> <tr><td id="report"> </td></tr> <tr><td style="height:20px"> </td></tr><tr><td> <a href="#" class="button" onclick="zoomToPoly();return false;">Zoom To Polygon</a> </td></tr><tr><td> <a href="#" class="button" onclick="clearPoly();return false;">Remove Polygon</a> </td></tr><tr><td style="padding-right:19px; height:30px;"> <span class="include"><a href="../index.html">Back</a></span> <form action="" method="POST" > <input name="paths" id="paths" value="" type="hidden" /> <input type="hidden" id="submitpath" value="Save Paths" name="save_paths"> <input type="submit" id="Save" value="Save" name="Save"> </form> </td></tr> </table>

Hey guys, I modified a script that i found on the web and and i'm trying to load google maps polygon that could be set already and if they are then load them as default so user can edit them or remove them. Everything I try does not work I could really do with some help with this. Thanks. <script type="text/javascript">var map; var polyShape; var markers = []; var drag_poly = false; var mouseDownPos; var oldVertexPos; <!-- this is the default Polygon --> var toplace = ["(52.63586014925004, 1.2875261303270236)","(52.63888119537785, 1.3024606701219454)","(52.632838894493, 1.325119971879758)","(52.626587360201505, 1.314305305131711)","(52.62294021941067, 1.304520606645383)","(52.62585795635695, 1.2856378551805392)","(52.6309635279822, 1.303147315629758)","(52.63190122128495, 1.281174659379758)"]; function createMarker(g) { var f = google.maps; var h = function (a) { return { url: a, size: new f.Size(11, 11), anchor: new f.Point(5, 5) } }; var e = new f.Marker({ position: g, map: map, icon: h("/images/google_maps/square.png"), raiseOnDrag: false, draggable: true }); markers.push(e); f.event.addListener(e, "mouseover", function () { e.setIcon(h("/images/google_maps/m-over-square.png")) }); f.event.addListener(e, "mouseout", function () { e.setIcon(h("/images/google_maps/square.png")) }); f.event.addListener(e, "drag", function (a) { for (var b = 0, d; d = markers[b]; b++) { if (d == e) { var c = a.latLng; break } } polyShape.getPath().setAt(b, c); showValues() }); f.event.addListener(e, "click", function () { for (var a = 0, b; b = markers[a]; a++) { if (b == e) { b.setMap(null); markers.splice(a, 1); break } } polyShape.getPath().removeAt(a); showValues() }); return e } function movePoly(a) { if (drag_poly) { var b = a.latLng; var d = polyShape.getPath(); for (var c = 0, g; g = oldVertexPos[c]; c++) { var f = g.lat() + b.lat() - mouseDownPos.lat(); var h = g.lng() + b.lng() - mouseDownPos.lng(); var e = new google.maps.LatLng(f, h); d.setAt(c, e) } } } function startDrag(a) { var b = google.maps; drag_poly = true; mouseDownPos = a.latLng; oldVertexPos = []; for (var d = 0, c; c = markers[d]; d++) { oldVertexPos[d] = c.getPosition(); b.event.clearInstanceListeners(c); c.setMap(null) } markers.length = 0; map.setOptions({ draggable: false }); b.event.addListener(map, "mousemove", movePoly); if (window.event) { window.event.returnValue = false } a.stop() } function mouseUp() { if (drag_poly) { drag_poly = false; map.setOptions({ draggable: true }); google.maps.event.clearListeners(map, "mousemove"); var a = polyShape.getPath(); for (var b = 0; b < a.getLength(); b++) { createMarker(a.getAt(b)) } } } function setShape() { var a = google.maps; var b = { strokeColor: "#3355ff", strokeOpacity: .8, strokeWeight: 3, fillColor: "#335599", fillOpacity: .3, map: map }; polyShape = new a.Polygon(b); polyShape.listeners = [a.event.addListener(polyShape, "mousedown", startDrag), a.event.addListener(polyShape, "mousemove", movePoly)]; document.onmouseup = mouseUp } function showValues() { var a = document.getElementById("report"); var b = google.maps.geometry.spherical; var d = polyShape.getPath().getArray(); document.getElementById("paths").value = d; var c = b.computeArea(d, 6371); if (markers.length <= 2) { a.innerHTML = " " } else if (markers.length > 2) { a.innerHTML = c.toFixed(3) + " km²" } } function leftClick(a) { if (a.latLng) { if (!polyShape) setShape(); createMarker(a.latLng); polyShape.getPath().push(a.latLng); showValues() } } function buildMap() { var a = google.maps; var b = { center: new a.LatLng(52.6322568, 1.3127337), zoom: 12, zoom: 8, mapTypeId: a.MapTypeId.ROADMAP, draggableCursor: 'auto', draggingCursor: 'move', disableDoubleClickZoom: true, mapTypeControlOptions: { mapTypeIds: [a.MapTypeId.ROADMAP, a.MapTypeId.SATELLITE, a.MapTypeId.TERRAIN] }, panControl: false, zoomControlOptions: { style: a.ZoomControlStyle.SMALL } }; map = new a.Map(document.getElementById("map"), b); setShape(); a.event.addListener(map, "click", leftClick) } function zoomToPoly() { if (polyShape && polyShape.getPath().getLength() > 1) { var b = new google.maps.LatLngBounds(); polyShape.getPath().forEach(function (a) { b.extend(a) }); map.fitBounds(b) } } function clearPoly() { var a = google.maps; for (var b = 0, d; d = markers[b]; b++) { a.event.clearInstanceListeners(d); d.setMap(null) } if (polyShape) { for (var c = 0, g; g = polyShape.listeners[c]; c++) { a.event.removeListener(g) } polyShape.setMap(null); polyShape = null } markers.length = 0; document.getElementById("report").innerHTML = " " } window.onload = buildMap; </script> <div id="map"></div> <table id="desc"> <tr><td> Click at least at three different places on the map to draw a polygon. <b>Try to drag the shape of the polygon.</b> The corners of the polygon are draggable and removable at any position. You can add and remove vertices simply by click. </td></tr> <tr><td> Area of polygon: </td></tr> <tr><td id="report"> </td></tr> <tr><td style="height:20px"> </td></tr><tr><td> <a href="#" class="button" onclick="zoomToPoly();return false;">Zoom To Polygon</a> </td></tr><tr><td> <a href="#" class="button" onclick="clearPoly();return false;">Remove Polygon</a> </td></tr><tr><td style="padding-right:19px; height:30px;"> <span class="include"><a href="../index.html">Back</a></span> <form action="" method="POST" > <input name="paths" id="paths" value="" type="hidden" /> <input type="hidden" id="submitpath" value="Save Paths" name="save_paths"> <input type="submit" id="Save" value="Save" name="Save"> </form> </td></tr> </table>