Google Maps Polyline - How do I remove it?

So I checked previous questions regarding this, which all relate to V2, which is of no help.

So, I create two markers, save them in an array as markers["to"] and markers["from"]

And then add them with this

function route(){
        for(var key in markers) {
           flightPlanCoordinates.push(markers[key].position);
       }
        flightPath = new google.maps.Polyline({
            path: flightPlanCoordinates,
            strokeColor: "#FF0000",
            strokeOpacity: 1.0,
            strokeWeight: 2
    });
   flightPath.setMap(map);
}

Brilliant. But. Next time I use it (With new markers in the array) it just adds a polyline there wi开发者_StackOverflowthout removing the previous one. I seem to have tried everything, removing from the first array, the flightPath, setMap(null) and so forth.

What's the correct way to remove the previous line before drawing a new one?

EDIT: SOLVED Solution

function route(){
    var flightPlanCoordinates = [];
    for(var key in markers) {
        flightPlanCoordinates.push(markers[key].position);
    }
    if(flightPath) {
        flightPath.setPath(flightPlanCoordinates);
    } else {
        flightPath = new google.maps.Polyline({
            path: flightPlanCoordinates,
            strokeColor: "#FF0000",
            strokeOpacity: 1.0,
            strokeWeight: 2
        });
        flightPath.setMap(map);
    }
}

Reason: flightPlanCoordinates needs to be initialized within the scope, this resets the array every time it is used, cleaning it out properly. (Also thanks for the input below to make the code a bit nicer.

---

Assuming that "mypolyline" is your Polyline object, you can also try:

mypolyline.setPath([]);

This way, you are taking out the coordinates from the Polyline, which in effect will remove it from the map.

---

I don't see var before flightPath = new..., so I presume flightPath is a global variable.

function route(){
   //flightPath.setMap(null); Doesnt't work!?
   for(var key in markers) {
       flightPlanCoordinates.push(markers[key].position);
   }
   if(flightPath) {//If flightPath is already defined (already a polyline)
       flightPath.setPath(flightPlanCoordinates);
   } else {
       flightPath = new google.maps.Polyline({
           path: flightPlanCoordinates,
           strokeColor: "#FF0000",
           strokeOpacity: 1.0,
           strokeWeight: 2
      });
      flightPath.setMap(map);//It's not necessary to setMap every time
   }

}

---

function traffic(map){
 // polyline
 this.path=null;
 this.map = google.maps.Map(ele, opt);
}
traffic.prototype._draw = function()
{
    //create new polyline
    var path = new google.maps.Polyline({
        path: this.get('latlngArr'),
        strokeColor: "#FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 2
    });
    //delete old
    var prepath = this.path;
    if(prepath){
        prepath.setMap(null);
    }
    //new polyline
    path.setMap(this.map);

    this.path = path;
}

---

flightPath 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. Create a global array line.

 var line = [];
 flightPath = new google.maps.Polyline({
        path: flightPlanCoordinates,
        strokeColor: "#FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 2
    });
 line.push(flightPath);

Now you are pushing all the polyline objects into an array line. You can make it invisible or remove it from the map by looping it like this:

for (i=0; i<line.length; i++) 
{                           
  line[i].setMap(null); //or line[i].setVisible(false);
}

---

set strokeWeight: 0 then polyline will hide