javascript - Google Maps API Directions Service Displaying Text Directions Repeating

Question

I'm using the Google Maps JavaScript API to display routes and text directions:

JS:

var geocoder;
var map;
var search_lat;
var search_lng;

function initMap() {

    var myLatLng = {
        lat: 38.5803844, 
        lng: -121.50024189999999
    };

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

    geocoder = new google.maps.Geocoder();

    document.getElementById('search_button').addEventListener('click', function() {
      getDirectionsByAddress(geocoder, map);
    });

    var locations = <?php echo json_encode($locations_array); ?>;

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {

        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][5], locations[i][6]),
            animation: google.maps.Animation.DROP,
            icon: icon_image,
            map: map
        });
    }

}

function getDirectionsByAddress() {

    // GET THE SEARCH ADDRESS

    var address = document.getElementById('address').value;
    console.log('search address: ' + address);

    geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            search_lat = results[0].geometry.location.lat();
            search_lng = results[0].geometry.location.lng();
            console.log('search address coordinates: ' + search_lat + ', ' + search_lng);
        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });

    // INITIALIZE GOOGLE MAPS DIRECTIONS SERVICE 

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

    directionsDisplay.setMap(map);
   directionsDisplay.setPanel(document.getElementById('directions'));

    calculateAndDisplayRoute(directionsService, directionsDisplay);

    // CHECK THE MODE OF TRAVEL 

    document.getElementById('mode').addEventListener('change', function() {
      calculateAndDisplayRoute(directionsService, directionsDisplay);
    });

    // CALCULATE THE DIRECTIONS BASED ON ADDRESS ENTERED AND MODE OF TRAVEL

    function calculateAndDisplayRoute(directionsService, directionsDisplay) {
        console.log('search address coordinates: ' + search_lat + ', ' + search_lng);
        var selectedMode = document.getElementById('mode').value;
        directionsService.route({
          origin: {lat: search_lat, lng: search_lng},
          destination: {lat: 38.5803844, lng: -121.50024189999999},
          travelMode: google.maps.TravelMode[selectedMode]
        }, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
          } else {
            window.alert('Directions request failed due to ' + status);
          }
        });
    }

}

I'm having trouble with the getDirectionsByAddress function. When I search a location and click the "search button" the first time, nothing happens. On the second click of the "search button", the route is drawn successfully on the map and the directions are displayed, however the directions are displayed twice (it seems the directions were calculated on the first click, but only on the second click are they being displayed). If I search a third time, the third set of directions are tacked on and this repeats over and over.

It seems I need to reset the lat and lng values during each search. I tried:

delete search_lat;
delete search_lng;

inside and at the end of the calculateAndDisplayRoute function. No luck.

HTML:

<div id="map"></div>

<div id="directions">

    <h3>Directions</h3>

</div>

<div class="search_block">

    <input type="text" name="address" id="address" class="address" placeholder="Where are you coming from?" />

</div>

<div class="search_block">    

    <select name="travel_mode" id="mode">
        <option>DRIVING</option>
        <option>WALKING</option>
        <option>BICYCLE</option>
        <option>TRANSIT</option>
    </select>

</div>

<div class="search_block">

    <button id="search_button" onclick="getDirectionsByAddress();">Search</button>

</div>

Question: How can I make it so the directions are refreshed with a single set of coordinates during each search?

Answer 1

• search_lat and search_lng are null until the geocoder returns results.
• the geocoder is asynchronous, its results don't come back until after you place the first call to the directions service.

a hint is this error in the javascript console: Uncaught TypeError: Cannot read property 'b' of null

Move the call to the directions service into the callback function for the geocoder (where/when the data exists).

Fix that, and create a single instance of the DirectionsRenderer and it works for me.

proof of concept fiddle

code snippet:

google.maps.event.addDomListener(window, "load", initMap);
var geocoder;
var map;
var search_lat;
var search_lng;
var directionsDisplay;
var directionsService;

function initMap() {

  var myLatLng = {
    lat: 38.5803844,
    lng: -121.50024189999999
  };

  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: myLatLng,
  });
  directionsDisplay = new google.maps.DirectionsRenderer;
  directionsService = new google.maps.DirectionsService;


  geocoder = new google.maps.Geocoder();

  document.getElementById('search_button').addEventListener('click', function() {
    getDirectionsByAddress(geocoder, map);
  });

  var locations = []; //<?php echo json_encode($locations_array); ?>;

  var infowindow = new google.maps.InfoWindow();

  var marker, i;

  for (i = 0; i < locations.length; i++) {

    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][5], locations[i][6]),
      animation: google.maps.Animation.DROP,
      icon: icon_image,
      map: map
    });
  }

}

function getDirectionsByAddress() {

  // GET THE SEARCH ADDRESS

  var address = document.getElementById('address').value;
  console.log('search address: ' + address);

  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      search_lat = results[0].geometry.location.lat();
      search_lng = results[0].geometry.location.lng();
      console.log('search address coordinates: ' + search_lat + ', ' + search_lng);
      calculateAndDisplayRoute(directionsService, directionsDisplay);
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });

  // INITIALIZE GOOGLE MAPS DIRECTIONS SERVICE 

  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById('directions'));



  // CHECK THE MODE OF TRAVEL 

  document.getElementById('mode').addEventListener('change', function() {
    calculateAndDisplayRoute(directionsService, directionsDisplay);
  });

  // CALCULATE THE DIRECTIONS BASED ON ADDRESS ENTERED AND MODE OF TRAVEL

  function calculateAndDisplayRoute(directionsService, directionsDisplay) {
    console.log('search address coordinates: ' + search_lat + ', ' + search_lng);
    var selectedMode = document.getElementById('mode').value;
    directionsService.route({
      origin: {
        lat: search_lat,
        lng: search_lng
      },
      destination: {
        lat: 38.5803844,
        lng: -121.50024189999999
      },
      travelMode: google.maps.TravelMode[selectedMode]
    }, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      } else {
        window.alert('Directions request failed due to ' + status);
      }
    });
  }

}

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="directions">

  <h3>Directions</h3>

</div>

<div class="search_block">

  <input type="text" name="address" id="address" class="address" placeholder="Where are you coming from?" value="San Franscisco, CA" />

</div>

<div class="search_block">

  <select name="travel_mode" id="mode">
    <option>DRIVING</option>
    <option>WALKING</option>
    <option>BICYCLE</option>
    <option>TRANSIT</option>
  </select>

</div>

<div class="search_block">

  <button id="search_button" onclick="getDirectionsByAddress();">Search</button>

</div>
<div id="map"></div>