Return to Snippet

Revision: 29696
at August 4, 2010 03:17 by peckham


Updated Code
<!DOCTYPE html> 
<html>
	<head> 
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Google Maps api v3 - enableEditing for polylines</title>
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.1&sensor=false"></script>
		<script type="text/javascript">
			var map = null;
			var polyLine;
			var tmpPolyLine;
			var markers = [];
			var vmarkers = [];
			var g = google.maps;
			
			var initMap = function(mapHolder) {
				markers = [];
				vmarkers = [];
				var mapOptions = {
					zoom: 7,
					center: new g.LatLng(52.092, 5.121), 
					mapTypeId: g.MapTypeId.HYBRID,
					draggableCursor: 'auto',
					draggingCursor: 'move',
					disableDoubleClickZoom: true
				};
				map = new g.Map(document.getElementById(mapHolder), mapOptions);
				g.event.addListener(map, "click", mapLeftClick);
				mapHolder = null;
				mapOptions = null;
			};
			
			var initPolyline = function() {
				var polyOptions = {
					strokeColor: "#3355FF",
					strokeOpacity: 0.8,
					strokeWeight: 4
				};
				var tmpPolyOptions = {
					strokeColor: "#3355FF",
					strokeOpacity: 0.4,
					strokeWeight: 4
				};
				polyLine = new g.Polyline(polyOptions);
				polyLine.setMap(map);
				tmpPolyLine = new g.Polyline(tmpPolyOptions);
				tmpPolyLine.setMap(map);
			};
			
			var mapLeftClick = function(event) {
				if (event.latLng) {
					var marker = createMarker(event.latLng);
					markers.push(marker);
					if (markers.length != 1) {
						var vmarker = createVMarker(event.latLng);
						vmarkers.push(vmarker);
						vmarker = null;
					}
					var path = polyLine.getPath();
					path.push(event.latLng);
					marker = null;
				}
				event = null;
			};
			
			var createMarker = function(point) {
				var imageNormal = new g.MarkerImage(
					"square.png",
					new g.Size(11, 11),
					new g.Point(0, 0),
					new g.Point(6, 6)
				);
				var imageHover = new g.MarkerImage(
					"square_over.png",
					new g.Size(11, 11),
					new g.Point(0, 0),
					new g.Point(6, 6)
				);
				var marker = new g.Marker({
					position: point,
					map: map,
					icon: imageNormal,
					draggable: true
				});
				g.event.addListener(marker, "mouseover", function() {
					marker.setIcon(imageHover);
				});
				g.event.addListener(marker, "mouseout", function() {
					marker.setIcon(imageNormal);
				});
				g.event.addListener(marker, "drag", function() {
					for (var m = 0; m < markers.length; m++) {
						if (markers[m] == marker) {
							polyLine.getPath().setAt(m, marker.getPosition());
							moveVMarker(m);
							break;
						}
					}
					m = null;
				});
				g.event.addListener(marker, "click", function() {
					for (var m = 0; m < markers.length; m++) {
						if (markers[m] == marker) {
							marker.setMap(null);
							markers.splice(m, 1);
							polyLine.getPath().removeAt(m);
							removeVMarkers(m);
							break;
						}
					}
					m = null;
				});
				return marker;
			};
			
			var createVMarker = function(point) {
				var prevpoint = markers[markers.length-2].getPosition();
				var imageNormal = new g.MarkerImage(
					"square_transparent.png",
					new g.Size(11, 11),
					new g.Point(0, 0),
					new g.Point(6, 6)
				);
				var imageHover = new g.MarkerImage(
					"square_transparent_over.png",
					new g.Size(11, 11),
					new g.Point(0, 0),
					new g.Point(6, 6)
				);
				var marker = new g.Marker({
					position: new g.LatLng(
						point.lat() - (0.5 * (point.lat() - prevpoint.lat())),
						point.lng() - (0.5 * (point.lng() - prevpoint.lng()))
					),
					map: map,
					icon: imageNormal,
					draggable: true
				});
				g.event.addListener(marker, "mouseover", function() {
					marker.setIcon(imageHover);
				});
				g.event.addListener(marker, "mouseout", function() {
					marker.setIcon(imageNormal);
				});
				g.event.addListener(marker, "dragstart", function() {
					for (var m = 0; m < vmarkers.length; m++) {
						if (vmarkers[m] == marker) {
							var tmpPath = tmpPolyLine.getPath();
							tmpPath.push(markers[m].getPosition());
							tmpPath.push(vmarkers[m].getPosition());
							tmpPath.push(markers[m+1].getPosition());
							break;
						}
					}
					m = null;
				});
				g.event.addListener(marker, "drag", function() {
					for (var m = 0; m < vmarkers.length; m++) {
						if (vmarkers[m] == marker) {
							tmpPolyLine.getPath().setAt(1, marker.getPosition());
							break;
						}
					}
					m = null;
				});
				g.event.addListener(marker, "dragend", function() {
					for (var m = 0; m < vmarkers.length; m++) {
						if (vmarkers[m] == marker) {
							var newpos = marker.getPosition();
							var startMarkerPos = markers[m].getPosition();
							var firstVPos = new g.LatLng(
								newpos.lat() - (0.5 * (newpos.lat() - startMarkerPos.lat())),
								newpos.lng() - (0.5 * (newpos.lng() - startMarkerPos.lng()))
							);
							var endMarkerPos = markers[m+1].getPosition();
							var secondVPos = new g.LatLng(
								newpos.lat() - (0.5 * (newpos.lat() - endMarkerPos.lat())),
								newpos.lng() - (0.5 * (newpos.lng() - endMarkerPos.lng()))
							);
							var newVMarker = createVMarker(secondVPos);
							newVMarker.setPosition(secondVPos);//apply the correct position to the vmarker
							var newMarker = createMarker(newpos);
							markers.splice(m+1, 0, newMarker);
							polyLine.getPath().insertAt(m+1, newpos);
							marker.setPosition(firstVPos);
							vmarkers.splice(m+1, 0, newVMarker);
							tmpPolyLine.getPath().removeAt(2);
							tmpPolyLine.getPath().removeAt(1);
							tmpPolyLine.getPath().removeAt(0);
							newpos = null;
							startMarkerPos = null;
							firstVPos = null;
							endMarkerPos = null;
							secondVPos = null;
							newVMarker = null;
							newMarker = null;
							break;
						}
					}
				});
				return marker;
			};
			
			var moveVMarker = function(index) {
				var newpos = markers[index].getPosition();
				if (index != 0) {
					var prevpos = markers[index-1].getPosition();
					vmarkers[index-1].setPosition(new g.LatLng(
						newpos.lat() - (0.5 * (newpos.lat() - prevpos.lat())),
						newpos.lng() - (0.5 * (newpos.lng() - prevpos.lng()))
					));
					prevpos = null;
				}
				if (index != markers.length - 1) {
					var nextpos = markers[index+1].getPosition();
					vmarkers[index].setPosition(new g.LatLng(
						newpos.lat() - (0.5 * (newpos.lat() - nextpos.lat())), 
						newpos.lng() - (0.5 * (newpos.lng() - nextpos.lng()))
					));
					nextpos = null;
				}
				newpos = null;
				index = null;
			};
			
			var removeVMarkers = function(index) {
				if (markers.length > 0) {//clicked marker has already been deleted
					if (index != markers.length) {
						vmarkers[index].setMap(null);
						vmarkers.splice(index, 1);
					} else {
						vmarkers[index-1].setMap(null);
						vmarkers.splice(index-1, 1);
					}
				}
				if (index != 0 && index != markers.length) {
					var prevpos = markers[index-1].getPosition();
					var newpos = markers[index].getPosition();
					vmarkers[index-1].setPosition(new g.LatLng(
						newpos.lat() - (0.5 * (newpos.lat() - prevpos.lat())),
						newpos.lng() - (0.5 * (newpos.lng() - prevpos.lng()))
					));
					prevpos = null;
					newpos = null;
				}
				index = null;
			};
			
			window.onload = function() {
				initMap('mapcontainer');
				initPolyline();
			};
		</script>
	</head> 
	<body> 
		<div id="mapcontainer" style="width: 800px; height: 600px; position: absolute; top: 50%; left: 50%; margin-top: -301px; margin-left: -401px; border: 1px solid black;"></div>
	</body> 
</html>

Revision: 29695
at August 3, 2010 22:43 by peckham


Initial Code
<!DOCTYPE html> 
<html>
	<head> 
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Google Maps api v3 - enableEditing for polylines</title>
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.1&sensor=false"></script>
		<script type="text/javascript">
			var map = null;
			var polyLine;
			var tmpPolyLine;
			var markers = [];
			var vmarkers = [];
			var g = google.maps;
			
			var initMap = function(mapHolder) {
				markers = [];
				vmarkers = [];
				var mapOptions = {
					zoom: 7,
					center: new g.LatLng(52.092, 5.121), 
					mapTypeId: g.MapTypeId.HYBRID,
					draggableCursor: 'auto',
					draggingCursor: 'move',
					disableDoubleClickZoom: true
				};
				map = new g.Map(document.getElementById(mapHolder), mapOptions);
				g.event.addListener(map, "click", mapLeftClick);
				mapHolder = null;
				mapOptions = null;
			};
			
			var initPolyline = function() {
				var polyOptions = {
					strokeColor: "#3355FF",
					strokeOpacity: 0.8,
					strokeWeight: 4
				};
				var tmpPolyOptions = {
					strokeColor: "#3355FF",
					strokeOpacity: 0.4,
					strokeWeight: 4
				};
				polyLine = new g.Polyline(polyOptions);
				polyLine.setMap(map);
				tmpPolyLine = new g.Polyline(tmpPolyOptions);
				tmpPolyLine.setMap(map);
			};
			
			var mapLeftClick = function(event) {
				if (event.latLng) {
					var marker = createMarker(event.latLng);
					markers.push(marker);
					if (markers.length != 1) {
						var vmarker = createVMarker(event.latLng);
						vmarkers.push(vmarker);
						vmarker = null;
					}
					var path = polyLine.getPath();
					path.push(event.latLng);
					marker = null;
				}
				event = null;
			};
			
			var createMarker = function(point) {
				var imageNormal = new g.MarkerImage(
					"square.png",
					new g.Size(11, 11),
					new g.Point(0, 0),
					new g.Point(6, 6)
				);
				var imageHover = new g.MarkerImage(
					"square_over.png",
					new g.Size(11, 11),
					new g.Point(0, 0),
					new g.Point(6, 6)
				);
				var marker = new g.Marker({
					position: point,
					map: map,
					icon: imageNormal,
					draggable: true
				});
				g.event.addListener(marker, "mouseover", function() {
					marker.setIcon(imageHover);
				});
				g.event.addListener(marker, "mouseout", function() {
					marker.setIcon(imageNormal);
				});
				g.event.addListener(marker, "drag", function() {
					for (var m = 0; m < markers.length; m++) {
						if (markers[m] == marker) {
							polyLine.getPath().setAt(m, marker.getPosition());
							moveVMarker(m);
							break;
						}
					}
					m = null;
				});
				g.event.addListener(marker, "click", function() {
					for (var m = 0; m < markers.length; m++) {
						if (markers[m] == marker) {
							marker.setMap(null);
							markers.splice(m, 1);
							polyLine.getPath().removeAt(m);
							removeVMarkers(m);
							break;
						}
					}
					m = null;
				});
				return marker;
			};
			
			var createVMarker = function(point) {
				var prevpoint = markers[markers.length-2].getPosition();
				var imageNormal = new g.MarkerImage(
					"square_transparent.png",
					new g.Size(11, 11),
					new g.Point(0, 0),
					new g.Point(6, 6)
				);
				var imageHover = new g.MarkerImage(
					"square_transparent_over.png",
					new g.Size(11, 11),
					new g.Point(0, 0),
					new g.Point(6, 6)
				);
				var marker = new g.Marker({
					position: new g.LatLng(
						point.lat() - (0.5 * (point.lat() - prevpoint.lat())),
						point.lng() - (0.5 * (point.lng() - prevpoint.lng()))
					),
					map: map,
					icon: imageNormal,
					draggable: true
				});
				g.event.addListener(marker, "mouseover", function() {
					marker.setIcon(imageHover);
				});
				g.event.addListener(marker, "mouseout", function() {
					marker.setIcon(imageNormal);
				});
				g.event.addListener(marker, "dragstart", function() {
					for (var m = 0; m < vmarkers.length; m++) {
						if (vmarkers[m] == marker) {
							var tmpPath = tmpPolyLine.getPath();
							tmpPath.push(markers[m].getPosition());
							tmpPath.push(vmarkers[m].getPosition());
							tmpPath.push(markers[m+1].getPosition());
							break;
						}
					}
					m = null;
				});
				g.event.addListener(marker, "drag", function() {
					for (var m = 0; m < vmarkers.length; m++) {
						if (vmarkers[m] == marker) {
							tmpPolyLine.getPath().setAt(1, marker.getPosition());
							break;
						}
					}
					m = null;
				});
				g.event.addListener(marker, "dragend", function() {
					for (var m = 0; m < vmarkers.length; m++) {
						if (vmarkers[m] == marker) {
							var newpos = marker.getPosition();
							var startMarkerPos = markers[m].getPosition();
							var firstVPos = new g.LatLng(
								newpos.lat() - (0.5 * (newpos.lat() - startMarkerPos.lat())),
								newpos.lng() - (0.5 * (newpos.lng() - startMarkerPos.lng()))
							);
							var endMarkerPos = markers[m+1].getPosition();
							var secondVPos = new g.LatLng(
								newpos.lat() - (0.5 * (newpos.lat() - endMarkerPos.lat())),
								newpos.lng() - (0.5 * (newpos.lng() - endMarkerPos.lng()))
							);
							var newVMarker = createVMarker(secondVPos);
							newVMarker.setPosition(secondVPos);//for some reason the wrong position is applied when creating the vmarker
							var newMarker = createMarker(newpos);
							markers.splice(m+1, 0, newMarker);
							polyLine.getPath().insertAt(m+1, newpos);
							marker.setPosition(firstVPos);
							vmarkers.splice(m+1, 0, newVMarker);
							tmpPolyLine.getPath().removeAt(2);
							tmpPolyLine.getPath().removeAt(1);
							tmpPolyLine.getPath().removeAt(0);
							newpos = null;
							startMarkerPos = null;
							firstVPos = null;
							endMarkerPos = null;
							secondVPos = null;
							newVMarker = null;
							newMarker = null;
							break;
						}
					}
				});
				return marker;
			};
			
			var moveVMarker = function(index) {
				var newpos = markers[index].getPosition();
				if (index != 0) {
					var prevpos = markers[index-1].getPosition();
					vmarkers[index-1].setPosition(new g.LatLng(
						newpos.lat() - (0.5 * (newpos.lat() - prevpos.lat())),
						newpos.lng() - (0.5 * (newpos.lng() - prevpos.lng()))
					));
					prevpos = null;
				}
				if (index != markers.length - 1) {
					var nextpos = markers[index+1].getPosition();
					vmarkers[index].setPosition(new g.LatLng(
						newpos.lat() - (0.5 * (newpos.lat() - nextpos.lat())), 
						newpos.lng() - (0.5 * (newpos.lng() - nextpos.lng()))
					));
					nextpos = null;
				}
				newpos = null;
				index = null;
			};
			
			var removeVMarkers = function(index) {
				if (markers.length > 0) {//clicked marker has already been deleted
					if (index != markers.length) {
						vmarkers[index].setMap(null);
						vmarkers.splice(index, 1);
					} else {
						vmarkers[index-1].setMap(null);
						vmarkers.splice(index-1, 1);
					}
				}
				if (index != 0 && index != markers.length) {
					var prevpos = markers[index-1].getPosition();
					var newpos = markers[index].getPosition();
					vmarkers[index-1].setPosition(new g.LatLng(
						newpos.lat() - (0.5 * (newpos.lat() - prevpos.lat())),
						newpos.lng() - (0.5 * (newpos.lng() - prevpos.lng()))
					));
					prevpos = null;
					newpos = null;
				}
				index = null;
			};
			
			window.onload = function() {
				initMap('mapcontainer');
				initPolyline();
			};
		</script>
	</head> 
	<body> 
		<div id="mapcontainer" style="width: 800px; height: 600px; position: absolute; top: 50%; left: 50%; margin-top: -301px; margin-left: -401px; border: 1px solid black;"></div>
	</body> 
</html>

Initial URL
http://www.ekelschot.eu/demo/maps/enableEditing.html

Initial Description
This example shows how enableEditing can be emulated in version 3 of the Google Maps API. \\r\\nWhen releasing an editable point after dragging it, the changed part of the polyline will be updated.\\r\\nPoints can be added to by clicking on the map and they can be removed by clicking on them.

Initial Title
Google Maps api v3  enableEditing polylines

Initial Tags
google, api

Initial Language
JavaScript