user1770461 user1770461 - 7 months ago 18
Javascript Question

How to remove particular path from google map using jquery

I have a google map on which i draw multiple path using different list of data points. Suppose after creating route on google map i need to remove that particular route among multiple routes. I have seen solution by using

Setmap(null)
method but it will clear all route. below are different data sources and i use
DrawRoute
method by passing individual sources. Now I need to remove DataSource1 route.

var dataSource1 = [{
"title": 'Duero',
"lat": '40.480243',
"lng": '-3.866172',
"description": 'This is Duero'
}, {
"title": 'Reyes Catolicos',
"lat": '40.47806',
"lng": '-3.870937',
"description": 'This is Reyes Catolicos'
}, {
"title": 'Guadarrama',
"lat": '40.478998',
"lng": '-3.878755',
"description": 'This is Guadarrama'
}];

var dataSource2 = [{
"title": 'Duero',
"lat": '40.460243',
"lng": '-3.866172',
"description": 'This is Duero'
}, {
"title": 'Reyes Catolicos',
"lat": '40.45806',
"lng": '-3.870937',
"description": 'This is Reyes Catolicos'
}, {
"title": 'Guadarrama',
"lat": '40.438998',
"lng": '-3.878755',
"description": 'This is Guadarrama'
}];


function DrawRoute(routeData, pathColor)
{
for (var i = 0; i < routeData.length; i++) {
if ((i + 1) < routeData.length) {
var src = new google.maps.LatLng(parseFloat(routeData[i].lat),
parseFloat(routeData[i].lng));
createMarker(src);

var des = new google.maps.LatLng(parseFloat(routeData[i + 1].lat),
parseFloat(routeData[i + 1].lng));
createMarker(des);
// poly.setPath(path);
service.route({
origin: src,
destination: des,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
var path = new google.maps.MVCArray();
var poly = new google.maps.Polyline({
map: map,
strokeColor: pathColor
});
for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
path.push(result.routes[0].overview_path[i]);
}
poly.setPath(path);
map.fitBounds(bounds);
}
});
}
}


Output

Answer

One option would to keep references to the polylines, use those references to hide/show/toggle the polylines.

proof of concept fiddle

code snippet:

function DrawRoute(routeData, pathColor) {
  for (var i = 0; i < routeData.length; i++) {
    if ((i + 1) < routeData.length) {
      var src = new google.maps.LatLng(parseFloat(routeData[i].lat),
        parseFloat(routeData[i].lng));
      var des = new google.maps.LatLng(parseFloat(routeData[i + 1].lat),
        parseFloat(routeData[i + 1].lng));
      service.route({
        origin: src,
        destination: des,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
      }, function(result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
          var path = new google.maps.MVCArray();
          var poly = new google.maps.Polyline({
            map: map,
            strokeColor: pathColor
          });
          for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
            path.push(result.routes[0].overview_path[i]);
            bounds.extend(result.routes[0].overview_path[i]);
          }
          poly.setPath(path);
          // keep reference to polyline in global polylines array
          polylines.push(poly);
          map.fitBounds(bounds);
        }
      });
    }
  }
}


function initialize() {
  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
    });
  DrawRoute(dataSource1, "#ff0000");
  DrawRoute(dataSource2, "#0000ff");

  // toggle the polylines when the associated button is clicked
  var routeBtns = document.getElementsByClassName("rtbtn")
  for (var i = 0; i < routeBtns.length; i++) {
    google.maps.event.addDomListener(routeBtns[i], 'click', (function(i) {
      return function() {
        if (polylines[i].getMap()) {
          polylines[i].setMap(null);
        } else {
          polylines[i].setMap(map);
        }
      }
    })(i))
  }
}

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

// global variables
var geocoder;
var map;
var polylines = [];
var bounds = new google.maps.LatLngBounds();
var service = new google.maps.DirectionsService();
var dataSource1 = [{
  "title": 'Duero',
  "lat": '40.480243',
  "lng": '-3.866172',
  "description": 'This is Duero'
}, {
  "title": 'Reyes Catolicos',
  "lat": '40.47806',
  "lng": '-3.870937',
  "description": 'This is Reyes Catolicos'
}, {
  "title": 'Guadarrama',
  "lat": '40.478998',
  "lng": '-3.878755',
  "description": 'This is Guadarrama'
}];

var dataSource2 = [{
  "title": 'Duero',
  "lat": '40.460243',
  "lng": '-3.866172',
  "description": 'This is Duero'
}, {
  "title": 'Reyes Catolicos',
  "lat": '40.45806',
  "lng": '-3.870937',
  "description": 'This is Reyes Catolicos'
}, {
  "title": 'Guadarrama',
  "lat": '40.438998',
  "lng": '-3.878755',
  "description": 'This is Guadarrama'
}];
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input class="rtbtn" id="route0" type="button" value="Rt0" />
<input class="rtbtn" id="route1" type="button" value="Rt1" />
<input class="rtbtn" id="route2" type="button" value="Rt2" />
<input class="rtbtn" id="route3" type="button" value="Rt3" />
<div id="map_canvas"></div>

Comments