How to Remove Polylines from google maps?

Asked

Viewed 59 times

1

Good morning guys, I need the code below besides drawing the lines on the map, remove the lines drawn earlier, but I’m not getting, someone could give me a help?

Follow image with result of current code 

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  <script src="https://code.angularjs.org/1.2.12/angular.min.js.map"></script>
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MINHAAPI"></script>
  <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

  <style type="text/css" media="screen">
    #map {
      position:absolute;
      top: 0; bottom: 0; left: 0; right: 0;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script type="text/javascript">

$(document).ready(function(){
  var MAP_ZOOM = 15
  var MARKER_SIZE = 60
  
  var map = new google.maps.Map(document.getElementById('map'), {
      zoom: MAP_ZOOM,
      center: {lat: -12.17011059, lng: -44.8119901,},
      mapTypeId: 'satellite'
    });
    
  var markers = [];
  
  
  
  window.onmessage = function(evt){
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(null);
    }
    
          
    
     var latlng = JSON.parse(evt.data);
        var array = $.map(latlng, function(el) {
  			return [[el.lat, el.lng]];
			});
    
    var data = JSON.parse(evt.data);
    
    map.setZoom(MAP_ZOOM);
    map.setCenter({lat:latlng[0].lat,lng:latlng[0].lng});

      markers = data.map(function(el, i) {
         
      var marker = new google.maps.Marker({
        position: el,
        icon: {
          url: el.iconUrl,
          scaledSize: new google.maps.Size(MARKER_SIZE, MARKER_SIZE)
        },
        map:map
      });
  
  
        if (i > 0) { // move this inside the marker creation loop
         var sitepath = new google.maps.Polyline({
                // use the markers in for the coordinates
                path: latlng,
                geodesic: false,
                strokeColor: '#FF0000',
                strokeOpacity: 1.0,
                strokeWeight: 2,
                map: map
              });
             }
    
      
      google.maps.event.addListener(marker , 'click', function(){
        var infowindow = new google.maps.InfoWindow({
          content:el.description,
          position: el,
          maxWidth: 200,
        });
        infowindow.open(map);
        setTimeout(function () { infowindow.close(); }, 120000);
      });
      return marker
      
    });
  }
});
  </script>
</body>
</html>

Resultado do código atual

javascript html google-maps google-maps-api-3

3 answers

0


Jeferson, try to use a button so that when it is triggered, you do the removal of the Polyline. If it works, you can follow an example of this to proceed in the way you think best.

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  <script src="https://code.angularjs.org/1.2.12/angular.min.js.map"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=key"></script>
  <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

   <style type="text/css" media="screen">
    #map {
      position:absolute;
      top: 0; bottom: 0; left: 0; right: 0;
      height: 80%;
    }
    #remove{
    z-index: 99999999;
    margin-top: 700px;
    }
  </style>
</head>
<body>
  <div id="map"></div>

  <button id="remove">Remover Polyline</button>

  <script type="text/javascript">
$(document).ready(function(){
  var MAP_ZOOM = 15
  var MARKER_SIZE = 60

  var map = new google.maps.Map(document.getElementById('map'), {
      zoom: MAP_ZOOM,
      center: {lat: -12.17011059, lng: -44.8119901,},
      mapTypeId: 'satellite'
    });

  var markers = [];
  var listPolyLines= [];


  window.onmessage = function(evt){
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(null);
    }          

     var latlng = JSON.parse(evt.data);
        var array = $.map(latlng, function(el) {
            return [[el.lat, el.lng, el.color]];
            });

    var data = JSON.parse(evt.data);

    map.setZoom(MAP_ZOOM);
    map.setCenter({lat:latlng[0].lat,lng:latlng[0].lng});

      markers = data.map(function(el, i) {

      var marker = new google.maps.Marker({
        position: el,
        icon: {
          url: el.iconUrl,
          scaledSize: new google.maps.Size(MARKER_SIZE, MARKER_SIZE)
        },
        map:map
      });


        if (i > 0) { // move this inside the marker creation loop
         var sitepath = new google.maps.Polyline({
                // use the markers in for the coordinates
                path: latlng,
                geodesic: false,
                strokeOpacity: 1.0,
                strokeColor : "red",
                strokeWeight: 2,
                map: map
              });
              listPolyLines.push(sitepath);
             }


      google.maps.event.addListener(marker , 'click', function(){
        var infowindow = new google.maps.InfoWindow({
          content:el.description,
          position: el,
          maxWidth: 200,
        });
        infowindow.open(map);
        setTimeout(function () { infowindow.close(); }, 120000);
      });
      return marker


    });
  }

  $('#remove').click( function(){
      for(let i = 0; i<listPolyLines.length; i++){
      listPolyLines[i].setMap(null);
      listPolyLines.splice(i);
    }
  });

});
  </script>
</body>
</html>

0

[EDITED] All right? You can use the setMap(null), for example, you can browse a list of Polylines and go setting them with the above method. Remember to remove the array element after being set to null.

Ex:

for(let i = 0; i<listPolyLines.length; i++){
  listPolyLines[i].setMap(null);
  listPolyLines.splice(i);

}

However, considering your current code, you should first declare the array:

 var listPolyLines= [];

Whenever you create your sitepath, which is yours Polyline, just below you should give a push in its list, i.e., add it as an element.

listPolyLines.push(sitepath);

I believe I’ve helped you in your doubt, in case you still have some sort of problem, please tell me to keep helping you.

  • Well, I’m new to Javascript and HTML I understand only the basics, I made the changes in the code but I don’t know if I changed in the correct way, I believe that not because it remains the same ...

  • Please send me your code the way you changed it, so I can help you better

  • did not fit all the code in the answer, follows code in another answer

0

Luis Faconi, did not fit all the code in the answer, follows code below: 

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  <script src="https://code.angularjs.org/1.2.12/angular.min.js.map"></script>
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=minhaapi"></script>
  <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

  <style type="text/css" media="screen">
    #map {
      position:absolute;
      top: 0; bottom: 0; left: 0; right: 0;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script type="text/javascript">

$(document).ready(function(){
  var MAP_ZOOM = 15
  var MARKER_SIZE = 60
  
  var map = new google.maps.Map(document.getElementById('map'), {
      zoom: MAP_ZOOM,
      center: {lat: -12.17011059, lng: -44.8119901,},
      mapTypeId: 'satellite'
    });
    
  var markers = [];
  var listPolyLines= [];
  
  
  window.onmessage = function(evt){
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(null);
    }
    for(let i = 0; i<listPolyLines.length; i++){
      listPolyLines[i].setMap(null);
      listPolyLines.splice(i);
    }
    
          
    
     var latlng = JSON.parse(evt.data);
        var array = $.map(latlng, function(el) {
  			return [[el.lat, el.lng, el.color]];
			});
    
    var data = JSON.parse(evt.data);
    
    map.setZoom(MAP_ZOOM);
    map.setCenter({lat:latlng[0].lat,lng:latlng[0].lng});

      markers = data.map(function(el, i) {
         
      var marker = new google.maps.Marker({
        position: el,
        icon: {
          url: el.iconUrl,
          scaledSize: new google.maps.Size(MARKER_SIZE, MARKER_SIZE)
        },
        map:map
      });
  
  
        if (i > 0) { // move this inside the marker creation loop
         var sitepath = new google.maps.Polyline({
                // use the markers in for the coordinates
                path: latlng,
                geodesic: false,
                strokeOpacity: 1.0,
                strokeColor : "red",
                strokeWeight: 2,
                map: map
              });
              listPolyLines.push(sitepath);
             }
    
      
      google.maps.event.addListener(marker , 'click', function(){
        var infowindow = new google.maps.InfoWindow({
          content:el.description,
          position: el,
          maxWidth: 200,
        });
        infowindow.open(map);
        setTimeout(function () { infowindow.close(); }, 120000);
      });
      return marker


    });
  }
});
  </script>
</body>
</html>

Thank you for your attention

Browser other questions tagged javascript html google-maps google-maps-api-3

You are not signed in. Login or sign up in order to post.