Hi,
I am bit stuck with making a saved polyline editable again. At the moment i have stored the points in a mysql database and i am able to show the route/polyline again with custom markers.
Now i like the polyline to be editable again and for this i was looking into:
Issues i have:
1/ i can't get the already saved points to be drag and drop
2/ i don't want the midmarkers, just the ability to move markers, add and delete markers
At the moment my startediting function looks like:
function startEditing(){
if(editing === true){
stopediting();
}else{
routeCoords = theRoute.getPath();
//remove custom icons
//setAllMap(null);
if(routeCoords.length > 0){
for(var i = 0; i < routeCoords.length; i++) {
var marker = setmarkers(routeCoords.getAt(i));
//alert("marker: "+marker);
markers.push(marker);
if(i > 0) {
var midmarker = setmidmarkers(routeCoords.getAt(i));
midmarkers.push(midmarker);
}
}
editing = true;
jQuery('#btnEditing').removeClass('green');
jQuery('#btnEditing').val('Stop Editing').addClass('red');
}
}
}
and function setmarkers looks like
function setmarkers(point){
var marker = new google.maps.Marker({
position: point,
map: map,
icon: imageNormal,
raiseOnDrag: false,
draggable: true
});
google.maps.event.addListener(marker, "mouseover", function() {
marker.setIcon(imageHover);
});
google.maps.event.addListener(marker, "mouseout", function() {
marker.setIcon(imageNormal);
});
google.maps.event.addListener(marker, "drag", function() {
for (var i = 0; i < markers.length; i++) {
if (markers[i] === marker) {
theRoute.getPath().setAt(i, marker.getPosition());
movemidmarker(i);
//movemarker(i);
break;
}
}
routeCoords = theRoute.getPath();
var stringtobesaved = marker.getPosition().lat().toFixed(6) + ',' + marker.getPosition().lng().toFixed(6);
pointsArray.splice(i,1,stringtobesaved);
});
////#end markers van DB
google.maps.event.addListener(marker, "click", function() {
alert("lengte "+length);
for (var i = 0; i < markers.length; i++) {
if (markers[i] === marker && markers.length !== 1) {
marker.setMap(null);
markers.splice(i, 1);
theRoute.getPath().removeAt(i);
removemidmarker(i);
break;
}
}
routeCoords = theRoute.getPath();
if(markers.length > 0) {
pointsArray.splice(i,1);
}
});
return marker;
}
Any suggestions?