Here is some code (for the Google Maps JavaScript API version 3) that achieves what you want. It supports:
- clicking to append vertices.
- clicking on the first vertex again to close the path.
- dragging vertices.
It's undocumented, but hopefully you can see what it's doing easily enough.
$(document).ready(function () {
var map = new google.maps.Map(document.getElementById('map'), { center: new google.maps.LatLng(21.17, -86.66), zoom: 9, mapTypeId: google.maps.MapTypeId.HYBRID, scaleControl: true });
var isClosed = false;
var poly = new google.maps.Polyline({ map: map, path: [], strokeColor: "#FF0000", strokeOpacity: 1.0, strokeWeight: 2 });
google.maps.event.addListener(map, 'click', function (clickEvent) {
if (isClosed)
return;
var markerIndex = poly.getPath().length;
var isFirstMarker = markerIndex === 0;
var marker = new google.maps.Marker({ map: map, position: clickEvent.latLng, draggable: true });
if (isFirstMarker) {
google.maps.event.addListener(marker, 'click', function () {
if (isClosed)
return;
var path = poly.getPath();
poly.setMap(null);
poly = new google.maps.Polygon({ map: map, path: path, strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.35 });
isClosed = true;
});
}
google.maps.event.addListener(marker, 'drag', function (dragEvent) {
poly.getPath().setAt(markerIndex, dragEvent.latLng);
});
poly.getPath().push(clickEvent.latLng);
});
});
It prevents JSON hijacking, a major JSON security issue that is formally fixed in all major browsers since 2011 with ECMAScript 5.
Contrived example: say Google has a URL like mail.google.com/json?action=inbox which returns the first 50 messages of your inbox in JSON format. Evil websites on other domains can't make AJAX requests to get this data due to the same-origin policy, but they can include the URL via a <script> tag. The URL is visited with your cookies, and by overriding the global array constructor or accessor methods they can have a method called whenever an object (array or hash) attribute is set, allowing them to read the JSON content.
The while(1); or &&&BLAH&&& prevents this: an AJAX request at mail.google.com will have full access to the text content, and can strip it away. But a <script> tag insertion blindly executes the JavaScript without any processing, resulting in either an infinite loop or a syntax error.
This does not address the issue of cross-site request forgery.
Best Answer
Google Maps now provides a "PolyMouseEvent" callback object on events that are triggered from a Polygon or Polyline.
To build on the other answers which suggested a solution involving a right click, all you would need to do is the following in the latest versions of the V3 API:
You'll notice that any complex calculations on whether or not we are near the point are no longer necesary, as the Google Maps API is now telling us which vertex we've clicked on.
Note: this will only work while the Polyline/Polygon is in edit mode. (Which is when the vertices you might want to delete are visible.)
As a final thought, you could consider using a click or double click event instead. "Click" is smart enough to not trigger on a drag, though using a single click trigger might still surprise some of your users.