How to remove polylines of google maps api 3

Question

Can someone tell me why I can't remove my polylines with this code:

    $("#chkRouteLines").click(function () {

    var polyline = new google.maps.Polyline({
        path: positions,
        strokeColor: "#FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 2,
        visible: true
    }); ;

    if ($(this).is(':checked')) {
        polyline.setMap(map);
    } else {
        polyline.setMap(null);
    }
})

I found in the documentation of google maps api 3 that I need to do: setMap(null).. But this didn't work.

Thank you!

http://stackoverflow.com/questions/9511474/google-maps-api-v3-remove-all-polylines — box86rowh, Aug 26 '12 at 23:17
Maybe read the question. I said setMap(null) didn't work here. I also read that SO question before. — Sllix, Aug 26 '12 at 23:18
why would the same api work sometimes and not others? do you get errors? Also, why do you have 2 semi colons after your polyline var is setup? — box86rowh, Aug 26 '12 at 23:27
You're going to need to post the full code for the page or a link to it. I suspect it is a different polyline that you see. How did you get the polyline plotted in the first place? With the DirectionsRenderer perhaps? — Marcelo, Aug 27 '12 at 08:53

geocodezip · Accepted Answer · 2015-04-21T17:23:21.580

You aren't retaining a reference to the polyline, it is local to the "$("#chkRouteLines").click" function. If you have one polyline, make the reference to it global.

var polyline = null; // in the global scope

$("#chkRouteLines").click(function () {
    if (!polyline || !polyline.setMap) {
      polyline = new google.maps.Polyline({
        path: positions,
        strokeColor: "#FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 2,
        visible: true
      }); 
    }

if ($(this).is(':checked')) {
    polyline.setMap(map);
} else {
    polyline.setMap(null);
}

working fiddle

If you need to add and remove multiple different polylines, an array usually works.

code snippet:

var geocoder;
var map;
var polyline;

positions = [new google.maps.LatLng(37.441883,-122.143019),
             new google.maps.LatLng(37.45296,-122.181725)];
function initialize() {
    var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
        center: new google.maps.LatLng(37.4419, -122.1419),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    
    $("#chkRouteLines").click(function () {
        if (!polyline || !polyline.setMap) {
          polyline = new google.maps.Polyline({
            path: positions,
            strokeColor: "#FF0000",
            strokeOpacity: 1.0,
            strokeWeight: 2,
            visible: true
          }); 
        }

    if ($(this).is(':checked')) {
        polyline.setMap(map);
    } else {
        polyline.setMap(null);
    }
})


}
google.maps.event.addDomListener(window, "load", initialize);

html, body, #map_canvas {
    height: 90%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>
<input id="chkRouteLines" value="click" type="checkbox" />

You're going to need to post the full code for the page or a link to it. I suspect it is a different polyline that you see. How did you get the polyline plotted in the first place? With the DirectionsRenderer perhaps? — Marcelo, Aug 27 '12 at 08:54
Initialize Polyline object after you initialize map object, both in same scope of function. And then , In your onclick function just call setMap function with your arguments. This way your map will have a single Polyline object and you won't loose its reference before clearing it from map. This solution working fine for me. — Dashrath, Apr 21 '15 at 15:40

score 0 · Answer 2 · answered May 09 '13 at 07:03

polyline 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 = [];
 polyline = new google.maps.Polyline({
        path: positions,
        strokeColor: "#FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 2,
        map: map
    });
 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); 
}

score 0 · Answer 3 · answered Apr 21 '15 at 15:52

In example Remove a Polyline Google Example, See that they created global variable flightPath and initialized it in function initialize with Polyline object. This way we don't loose its reference on button click.So by using the code flightPath.setMap(null); the hide the Polyline from map.

In your example , you are initializing polyline on click event, so you overwrite previous Polyline object reference and this is why it is not hiding when you call polyline.setMap(null); Follow the given example to make it right.

How to remove polylines of google maps api 3

3 Answers3

Linked