[Vuejs]-Google Directions API – Route is blurred after a new request

by

0πŸ‘

βœ…

I’d need to investigate this a bit further when I have some time…

The documentation mentions that

Because the renderer is an MVCObject, it will automatically detect any changes to its properties and update the map when its associated directions have changed.

and I am not sure about what that exactly means.

That said, simply calling directionsRenderer.setMap(null); before calculating the new route and directionsRenderer.setMap(map); in the callback fixes the issue. See the snippet below.

const transfers = [{
  "id": 29,
  "date": "2020-02-12T08:00:00.000Z",
  "pick_up": "Sofia Airport, Terminal 1",
  "drop_off": "Stara Zagora",
  "driver": "Π‘Π’",
  "vehicle": 6264,
},
{
  "id": 43,
  "date": "2020-02-13T08:30:00.000Z",
  "pick_up": "Sofia Terminal 1",
  "drop_off": "Boutique One Hotel Sofia",
  "driver": "Π‘Π’",
  "vehicle": 6264,
}];

let map, directionsService, directionsRenderer;
let selectedTrans = 0;

window.addEventListener('load', function() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 7,
    center: {
      lat: 42.698334,
      lng: 23.319941
    }
  });
  
  directionsService = new google.maps.DirectionsService();
  directionsRenderer = new google.maps.DirectionsRenderer();
  
  calcRoute();
});

function calcRoute() {

  directionsRenderer.setMap(null);

  const start = transfers[selectedTrans].pick_up;
  const end= transfers[selectedTrans].drop_off;
  const request = {
    origin: start,
    destination: end,
    travelMode: 'DRIVING'
  };

  directionsService.route(request, (result, status) => {
    if (status == 'OK') {
      directionsRenderer.setDirections(result);
      directionsRenderer.setMap(map);
    }
  })
}

document.getElementById('changeDirectionsBtn').addEventListener('click', () => {
  selectedTrans = selectedTrans == 0 ? 1 : 0;
  calcRoute();
});
#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<button id="changeDirectionsBtn"> Change Directions </button>
<div id="map">
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk" defer></script>

Leave a comment