I have a problem with Polylines google map api v3.
I draw a polyline when I click a link , as I delete or hide with the same link a polyline ?
Here is my code: HTML AND javascript
function mostrarRuta(ltOrigen, lgOrigen, ltDestino, lgDestino) { var start = new google.maps.LatLng(ltOrigen, lgOrigen); var end = new google.maps.LatLng(ltDestino, lgDestino); var directionsDisplay = new google.maps.DirectionsRenderer();// also, constructor can get "DirectionsRendererOptions" object directionsDisplay.setMap(map); // map should be already initialized. var request = { origin : start, destination : end, travelMode : google.maps.TravelMode.DRIVING }; var directionsService = new google.maps.DirectionsService(); //var bounds = new google.maps.LatLngBounds(); directionsService.route(request, function(response, status) { /*if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); }*/ if (status == google.maps.DirectionsStatus.OK) { var path = new google.maps.MVCArray(); var poly = new google.maps.Polyline({ map: map, strokeColor: '#F3443C' }); for (var i = 0, len = response.routes[0].overview_path.length; i < len; i++) { path.push(response.routes[0].overview_path[i]); } poly.setPath(path); //map.fitBounds(bounds); } }); }
<a href="mostrarRuta(ltOrigen, lgOrigen, ltDestino, lgDestino);">MI ruta</a>
Advertisement
Answer
You need to keep a reference to the polyline in the global scope. If it has already been created, remove it from the map (if you want you can toggle it by re-adding it to the map when the link is clicked when it isn’t shown.
code snippet:
var geocoder; var map; var poly; var ltOrigen = 40.7127837, lgOrigen = -74.0059413, ltDestino = 40.735657, lgDestino = -74.1723667; 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 });; } function mostrarRuta(ltOrigen, lgOrigen, ltDestino, lgDestino) { if (poly && poly.setMap && poly.getMap && (poly.getMap() != null)) { poly.setMap(null); return; } var start = new google.maps.LatLng(ltOrigen, lgOrigen); var end = new google.maps.LatLng(ltDestino, lgDestino); var directionsDisplay = new google.maps.DirectionsRenderer(); // also, constructor can get "DirectionsRendererOptions" object directionsDisplay.setMap(map); // map should be already initialized. var request = { origin: start, destination: end, travelMode: google.maps.TravelMode.DRIVING }; var directionsService = new google.maps.DirectionsService(); //var bounds = new google.maps.LatLngBounds(); directionsService.route(request, function(response, status) { /*if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); }*/ if (status == google.maps.DirectionsStatus.OK) { var path = new google.maps.MVCArray(); poly = new google.maps.Polyline({ map: map, strokeColor: '#F3443C' }); var bounds = new google.maps.LatLngBounds(); for (var i = 0, len = response.routes[0].overview_path.length; i < len; i++) { path.push(response.routes[0].overview_path[i]); bounds.extend(response.routes[0].overview_path[i]); } poly.setPath(path); map.fitBounds(bounds); } }); } google.maps.event.addDomListener(window, "load", initialize);
html, body, #map_canvas { height: 100%; width: 100%; margin: 0px; padding: 0px }
<script src="https://maps.googleapis.com/maps/api/js"></script> <a href="javascript:mostrarRuta(ltOrigen, lgOrigen, ltDestino, lgDestino);">MI ruta</a> <div id="map_canvas"></div>