Removing polylines from Google maps

Question

I use DirectionsRenderer to display the path, but after I am done with this, I would like to remove the polyline and continue working. I don't seem to control the markers and polylines created by this function.

Does anyone know how to remove such polylines, if this is not possible, other suggestions?

Now I can use the suppress property, although since I use polylines in the first step, this does not really solve anything.

Heavily upset .. Hooray!

Answer 1

Here is the solution to your problem: either use the suppressPolylines parameter, or remove the renderer from the map

 var directionsDisplay; var directionsService = new google.maps.DirectionsService(); var map; var time; var pointA = new google.maps.LatLng(48.86, 2.35); var pointB = new google.maps.LatLng(33.7167, 73.0667); function initialize() { var rendererOptions = { map: map, draggable: true } // Instantiate a directions service. directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); // Create a map and center it on islamabad. var islamabad = new google.maps.LatLng(33.7167, 73.0667); var mapOptions = { zoom: 13, center: islamabad } map = new google.maps.Map(document.getElementById('map'), mapOptions); directionsDisplay.setMap(map); calcRoute(); } function calcRoute() { var start = pointA; var end = pointB; var request = { origin: start, destination: end, travelMode: google.maps.TravelMode.DRIVING }; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } }); }; function removeRoute() { directionsDisplay.setOptions({ suppressPolylines: true }); // this "refreshes" the renderer directionsDisplay.setMap(map); }; function removeRouteNull() { directionsDisplay.setMap(null); }; google.maps.event.addDomListener(window, 'load', initialize); 

 #map { height: 280px; } 

 <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> <button onclick="removeRoute()">Remove route (suppressPolylines)</button> <button onclick="removeRouteNull()">Remove route (setMap(null))</button> <button onclick="initialize()">Undo all</button> <section id="map"></section> 

Answer 2

Here's how the polyline will be removed from google v3 maps. Hope this helps you.

 var line = []; var flightPath = new google.maps.Polyline({ path: flightPlanCoordinates, //create an array of LatLng objects strokeColor: "#FF0000", strokeOpacity: 1.0, strokeWeight: 2 }); line.push(flightPath); 

Now you drag all the polyline objects into the array string. 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); //or line[i].setVisible(false); } 

Answer 3

Use

[self.polyline setMap: nil];