I have an MVCArray to store my polyline path in, but I need to clear the MVCArray when the user changes their selection. Relevant code is below.

routePoints = new google.maps.MVCArray();
xmlhttp.onreadystatechange=function() {
            if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                markersArray = eval("(" + xmlhttp.responseText + ")");
                removeLines();
                for (var i = 0; i < markersArray.length; i++) {
                    var address = new google.maps.LatLng(markersArray[i][0], markersArray[i][1]);
                    routePoints.insertAt(routePoints.length, address);
                }
                routePath = new google.maps.Polyline({
                    path: routePoints,
                    strokeOpacity: 1.0,
                    strokeWeight: 2,
                    map: map,
                });
            }
        }

The removeLines() function is below. I have tried many different versions of this function (while loop, routePoints.pop(), setting routePoints.length to 0), but nothing has cleared the MVCArray. The polylines are being displayed correctly by the way, but once a user changes their selection I need the previous polylines to be removed from the map. Thanks in advance.

function removeLines() {
        if (routePoints) {
            for (var i=0; i < routePoints.length; i++) {
                routePoints.removeAt(i);
            }
        }
    }

I have an MVCArray to store my polyline path in, but I need to clear the MVCArray when the user changes their selection. Relevant code is below.

routePoints = new google.maps.MVCArray();
xmlhttp.onreadystatechange=function() {
            if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                markersArray = eval("(" + xmlhttp.responseText + ")");
                removeLines();
                for (var i = 0; i < markersArray.length; i++) {
                    var address = new google.maps.LatLng(markersArray[i][0], markersArray[i][1]);
                    routePoints.insertAt(routePoints.length, address);
                }
                routePath = new google.maps.Polyline({
                    path: routePoints,
                    strokeOpacity: 1.0,
                    strokeWeight: 2,
                    map: map,
                });
            }
        }

The removeLines() function is below. I have tried many different versions of this function (while loop, routePoints.pop(), setting routePoints.length to 0), but nothing has cleared the MVCArray. The polylines are being displayed correctly by the way, but once a user changes their selection I need the previous polylines to be removed from the map. Thanks in advance.

function removeLines() {
        if (routePoints) {
            for (var i=0; i < routePoints.length; i++) {
                routePoints.removeAt(i);
            }
        }
    }

• javascript
• google-maps
• google-maps-api-3

2 Answers 2

to delete all mvcarray elements:

routePoints.clear();

So routePoints is just an array of LatLng objects, not individual polylines. I think you probably need a separate array for the polylines, which you can then loop over to remove them all.
If you want to remove visible polylines, you can just call the setMap() function, passing it null.

routePoints = new google.maps.MVCArray();
var polylines = []; // new array for the polylines, needs to be a global variable

xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        markersArray = eval("(" + xmlhttp.responseText + ")");
        removeLines();
        for (var i = 0; i < markersArray.length; i++) {
            var address = new google.maps.LatLng(markersArray[i][0], markersArray[i][1]);
            routePoints.insertAt(routePoints.length, address);
        }
        routePath = new google.maps.Polyline({
            path: routePoints,
            strokeOpacity: 1.0,
            strokeWeight: 2,
            map: map,
        });

        // add the polyline to the array
        polylines.push(routePath);
    }
}

function removeLines() {
    for (var i=0; i < polylines.length; i++) {
        polylines[i].setMap(null);
    }

    // you probably then want to empty out your array as well
    polylines = [];

    // not sure you'll require this at this point, but if you want to also clear out your array of coordinates...
    routePoints.clear();
}