how to remove polyline on google map

Question

below is code that i have to write in my program for draw polyline on google map

suppose response.SelectedTruck.length=150

value contain in response.SelectedTruck is latitude and longitude

i have to push all latitude and longitude value in m variable

            //code for draw polyline
            for (var i = 0; i < response.SelectedTruck.length; i++) {
                      var m = response.SelectedTruck[i];
                           (function (n) {
                               setTimeout(function () {
                                path.push(new google.maps.LatLng(parseFloat(n.lat), parseFloat(n.lang)));
                                  addPolyline(path);
                                 }, i * 1000);
                                }(m));
                              }
                             function addPolyline(m) {
                               var userCoordinate = new google.maps.Polyline({
                                     path: m,
                                     strokeColor: 'blue',
                                     strokeOpacity: 2,
                                     strokeWeight: 2,
                                     icons: [{
                                         icon: lineSymbol,
                                          offset: '100%'
                                          }]
                                      });
                                     userCoordinate.setMap(map);
                                   }

for this code i draw polyline on map and i select first id then it will

be draw the polyline on the map but after i select second id then the old

polyline was not remove on the map.so how to remove the polyline if i select other id ?

Answer 1

Since you are only referencing on one map. you must have a reference on the Polyline that was previously drawn and set it's map to null.

The easiest way to do this is to declare your userCoordinate variable globally and set the map to null before creating a new Polyline

var userCoordinate;



               .............
               .............

         function addPolyline(m) {
                userCoordinate.setMap(null);
                userCoordinate = new google.maps.Polyline({
                                 path: m,
                                 strokeColor: 'blue',
                                 strokeOpacity: 2,
                                 strokeWeight: 2,
                                 icons: [{
                                     icon: lineSymbol,
                                      offset: '100%'
                                      }]
                                  });

               userCoordinate.setMap(map);
          }

Another option is to create a new map and use it to the new Polyline (But it will cause your map to reload)

           function addPolyline(m) {
                map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 3,
                    center: {lat: 0, lng: -180},
                    mapTypeId: google.maps.MapTypeId.TERRAIN
                 });

                var userCoordinate = new google.maps.Polyline({
                                 path: m,
                                 strokeColor: 'blue',
                                 strokeOpacity: 2,
                                 strokeWeight: 2,
                                 icons: [{
                                     icon: lineSymbol,
                                      offset: '100%'
                                      }]
                                  });

                                 userCoordinate.setMap(map);
            }