Editable Google Maps polylines

by oterox

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3&amp;libraries=geometry"></script>
<div id="map"></div>
	<br>
	<div id="length"></div>
	<table id="vertices">
		<tr>
			<th>ID</th>
			<th>Latitu</th>
			<th>Longitude</th>
			<th>&nbsp;</th>
		</tr>
	</table>

CSS

body {
			font-family: Arial, Helvetica, sans-serif;
		}
		table {
			border-collapse: collapse;
			
		}
		th, td {
			padding: 5px;
			background: #fff;
			vertical-align:top;
			border: 1px solid black;
		}
		#map {
			width: 420px; height: 360px; 
		}

JavaScript

function initialize() {
			var map = new google.maps.Map(document.getElementById("map"), {
			  center: {lat: 51.561162, lng: -0.163331},
			  zoom: 15,
			  mapTypeId: google.maps.MapTypeId.ROADMAP,
			  disableDefaultUI: true
			});
			
			/* simple array, none of the event are fired on the polyline, or the path
			var path = [
				{lat: 51.5573205, lng: -0.1663994},
				{lat: 51.5636304, lng: -0.1613568}
			];*/
				
			/* doesn't like the LatLngLiteral style:
			var path = new google.maps.MVCArray([
				{lat: 51.5573205, lng: -0.1663994},
				{lat: 51.5636304, lng: -0.1613568}
			]);*/
			var path = new google.maps.MVCArray([
				new google.maps.LatLng(51.5573205, -0.1663994),
				new google.maps.LatLng(51.5636304, -0.1613568)
			]);
			
			updateCoords(path);
			
			var polyline = new google.maps.Polyline({
				path: path,
				map: map,
				draggable: false,
				editable: true,
				geodesic: true
			});
			
			path.addListener('insert_at', function(vertex) {
				updateCoords(this);
			});

			path.addListener('set_at', function(vertex) {
				updateCoords(this);
			});
			
			path.addListener('remove_at', function(vertex) {
				updateCoords(this);
			});

			google.maps.event.addListener(polyline, 'dragend', function(event) {
				console.log('Drag');
				console.log(event);
			});
			
			$('body').on('click', 'a', function(event) {
				event.preventDefault();
				if (path.getLength() > 2) {
					path.removeAt($(this).data('id'));
				}
				return false;
			});
		}
		
		function updateCoords(path) {
			var row;
			$('#length').text('Length: ' + google.maps.geometry.spherical.computeLength(path).toFixed(2));
			$('#vertices tr:gt(0)').remove();
			path.forEach(function(element, index) {
				row = $('<tr>');
				row.append('<td>' + (index+1) + '</td>');
				row.append('<td>' + element.lat() + '</td>');
				row.append('<td>' + element.lng() + '</td>');
				row.append('<td><a href="" data-id="' + index +...