CODEWITHSUNDEEP
jquerygoogle-maps-api-3
Sllix
Sllix

Reputation: 606

How to remove polylines of google maps api 3

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!

Upvotes: 2

Views: 7055

Answers (3)

geocodezip
geocodezip

Reputation: 161404

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" />

Upvotes: 4

Dashrath
Dashrath

Reputation: 2189

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.

Upvotes: 0

Aravind Asok
Aravind Asok

Reputation: 512

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); 
}

Upvotes: 0

Related Questions