Jeff Liu Jeff Liu - 1 month ago 8
Javascript Question

Google Map Direction routes do not disappear when the next one was come out

I use the Google Maps Javascript API V3 to my Android WebView
Now I got a problum that when I use the Direction like A to B it works, but when I change that A to C, the route of A to B does not disappear, so that route A to B is overlapping route A to C.

A to B
A to B

A to C
A to C

Button to do direct

direction.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
button.setVisibility(View.INVISIBLE);
infowindow.setVisibility(View.INVISIBLE);
String centerUrl = "javascript:direction(" + Lat + "," + Lng + "," + LatNew + "," + LngNew + ")";
webView.loadUrl(centerUrl);

}
});


HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var myLatLng,endLatLng;
var map;
var marker,beachMarker,eatMarker,drinkMarker;
var location;

function initMap() {

map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: myLatLng
});

marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
beachMarker = new google.maps.Marker({
position: {lat: 25.078838,lng: 121.574204},
map: map,
icon: 'file:///android_asset/Marker.png'
});
beachMarker.addListener('click',function(){
Android.responseResult("beach");
});

eatMarker = new google.maps.Marker({
position: {lat: 25.080643,lng: 121.569551},
map: map,
icon: 'file:///android_asset/Marker.png'
});
eatMarker.addListener('click',function(){
Android.responseResult("eat");
});

drinkMarker = new google.maps.Marker({
position: {lat: 25.079734,lng: 121.569519},
map: map,
icon: 'file:///android_asset/Marker.png'
});
drinkMarker.addListener('click',function(){
Android.responseResult("drink");
});

}


function centerAt(latitude,longitude){
myLatLng = new google.maps.LatLng(latitude,longitude);
marker.setMap(null);
map.panTo(myLatLng);

marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: 'file:///android_asset/location.png'
});

}
function direction(latitude,longitude,latitudeNew,longitudeNew){
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
myLatLng = new google.maps.LatLng(latitude,longitude);
endLatLng = new google.maps.LatLng(latitudeNew,longitudeNew);
directionsService.route({
origin: myLatLng,
destination: endLatLng,
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
directionsDisplay.setMap(map);
}






</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBMqm4dbVtq1OiUpyDxzRcU5196guci_jg&callback=initMap"></script>





What can I do to remove the last route?

Answer

You should use a global var for directionsDisplay and not a local one inside the direction function. Then in the direction function you should set the directionsDisplay to null and assign it to the new one.

<script>
var myLatLng,endLatLng;
var map;
var marker,beachMarker,eatMarker,drinkMarker;
var location;
var directionsDisplay;

function direction(latitude,longitude,latitudeNew,longitudeNew) {
    var directionsService = new google.maps.DirectionsService;
    if (directionsDisplay != null) {
       directionsDisplay.setMap(null);
    }
    directionsDisplay = new google.maps.DirectionsRenderer;

    .....
Comments