Revision: 29696
Updated Code
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
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
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