Alex Alex - 5 months ago 104
Javascript Question

Clear Route in Google Maps directions

I have a set of markers loaded from an XML; when clicked on a marker, I have directions rendered from current location to the marker position. However, I'd like to be able to clear a route, preferably when the user clicks on a different marker. Currently all the routes show up together. I can't figure out where I'm messing up. I've tried the directionsDisplay.setMap(null) but that doesn't clear them. Please let me know if you notice what the issue is. Thank you.

function loadGoogleMap(){
// load google map
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
'callback=MyMap';
document.body.appendChild(script);
}


var map = ''

function MyMap(){

/*

document.getElementById('finddate').value

*/

var im = 'http://www.robotwoods.com/dev/misc/bluecircle.png';
var CustomMarker = 'http://findmyyard.com/images/MarkerIcon.png';

if(navigator.geolocation){

navigator.geolocation.getCurrentPosition(locate, noPos());
} else {

noPos();

}

function locate(position){


var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();

var myLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var mapOptions = {
zoom: 12,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: false,
streetViewControl: false,
mapTypeControl: false,
panControlOptions: { position: google.maps.ControlPosition.TOP_RIGHT},
zoomControlOptions: { position: google.maps.ControlPosition.TOP_RIGHT }
}
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var userMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: im
});
var infoWindow = new google.maps.InfoWindow;



// Change this depending on the name of your PHP file

downloadUrl("phps/xmltest.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var dt1 = markers[i].getAttribute("date1");
var dt2 = markers[i].getAttribute("date2");
var dt3 = markers[i].getAttribute("date3");
var tm1 = markers[i].getAttribute("time1");
var tm2 = markers[i].getAttribute("time2");
var tm3 = markers[i].getAttribute("time3");
var pid = markers[i].getAttribute("PID");
var d = new Date();
var raw = pid * d.getFullYear();
var jshtml = '<a href='+'phps/info.php?raw='+ raw +'>More Info</a>'
var html = "<b>" + name + "</b> <br/>" + "Date of Yard Sale: " + dt1 + '&nbsp;' + tm1 + '&nbsp;' + dt2 + '&nbsp;' + tm2 + '&nbsp;' + dt3 + '&nbsp;' + tm3 + '&nbsp;' + "<br/>" + address + "&nbsp;" + "Click this for: " + jshtml;
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = new google.maps.Marker({
map: map,
position: point,
icon: CustomMarker
});



bindInfoWindow(marker, map, infoWindow, html, directionsDisplay);
}


});




function bindInfoWindow(marker, map, infoWindow, html, directionsDisplay) {


google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker, html);
center: position;

directionsDisplay.setMap(null)
directionsDisplay.setDirections({routes: []});
directionsDisplay = null;



directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map)
var start = myLatLng;
var latitude = marker.getPosition().lat().toFixed(6)
var longitude = marker.getPosition().lng().toFixed(6)
var end = new google.maps.LatLng(latitude, longitude);
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(result, status) {

if (status == google.maps.DirectionsStatus.OK) {

directionsDisplay.setMap(null)
directionsDisplay.setMap(map);
directionsDisplay.setDirections(result);

}
});


});
}

function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;

request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};


request.open('GET', url, true);
request.send();
}
function doNothing() {}
}

Answer

Remove this from the click-callback:

directionsDisplay = new google.maps.DirectionsRenderer();

This line always creates a new DirectionsRenderer-instance, but when you only want to show 1 route at a time you only need a single instance(which has already been initialized in locate).

There will be no need to clear anything when you use a single instance. A single directionsRenderer will never show more than 1 route, as soon as you call setDirections the previously drawn route will be removed automatically.

Comments