CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
Charles
Charles

Reputation: 13

How to change address text returned in DirectionsLeg

I am trying to change the text that is displayed in the returned directions from the Google Javascript API. I want to prepend a business name to the front of each of the addresses returned in each leg of the route. These will help our users better identify the location.

I am testing with this code (in my particular example there are 8 legs in the route:

        response.routes[0].legs[0].start_address = 'Store #0: ' + response.routes[0].legs[0].start_address;
        response.routes[0].legs[1].start_address = 'Store #1: ' + response.routes[0].legs[1].start_address;
        response.routes[0].legs[2].start_address = 'Store #2: ' + response.routes[0].legs[2].start_address;
        response.routes[0].legs[3].start_address = 'Store #3: ' + response.routes[0].legs[3].start_address;
        response.routes[0].legs[4].start_address = 'Store #4: ' + response.routes[0].legs[4].start_address;
        response.routes[0].legs[5].start_address = 'Store #5: ' + response.routes[0].legs[5].start_address;
        response.routes[0].legs[6].start_address = 'Store #6: ' + response.routes[0].legs[6].start_address;
        response.routes[0].legs[7].start_address = 'Store #7: ' + response.routes[0].legs[7].start_address;

        directionsDisplay.setDirections(response);

The problem is that my change is only showing up for the first leg, as shown in the screenshot linked below.. The request object, when queried, does reflect my changes before it goes into the setDirections method. However, when I query the innerHTML after, the original directions are there.

I have found many examples online of this property being changed, and I find it weird that only the first leg is working, while the remaining do not. I am still fairly new to Google Maps API, so am definitely not ruling out developer error. Please advise, thanks!

Charles

Output Example

Upvotes: 1

Views: 216

Answers (1)

geocodezip
geocodezip

Reputation: 161334

Looks like the labels on the DirectionsDisplay panel after the first are using the end_address, not the start_address.

Add the labels to both.

  response.routes[0].legs[0].start_address = 'Store #0: ' + response.routes[0].legs[0].start_address;
  response.routes[0].legs[1].start_address = 'Store #1: ' + response.routes[0].legs[1].start_address;
  response.routes[0].legs[2].start_address = 'Store #2: ' + response.routes[0].legs[2].start_address;
  response.routes[0].legs[3].start_address = 'Store #3: ' + response.routes[0].legs[3].start_address;
  response.routes[0].legs[4].start_address = 'Store #4: ' + response.routes[0].legs[4].start_address;
  response.routes[0].legs[5].start_address = 'Store #5: ' + response.routes[0].legs[5].start_address;
  response.routes[0].legs[6].start_address = 'Store #6: ' + response.routes[0].legs[6].start_address;
  response.routes[0].legs[7].start_address = 'Store #7: ' + response.routes[0].legs[7].start_address;
  response.routes[0].legs[0].end_address = 'Store #1: ' + response.routes[0].legs[0].end_address;
  response.routes[0].legs[1].end_address = 'Store #2: ' + response.routes[0].legs[1].end_address;
  response.routes[0].legs[2].end_address = 'Store #3: ' + response.routes[0].legs[2].end_address;
  response.routes[0].legs[3].end_address = 'Store #4: ' + response.routes[0].legs[3].end_address;
  response.routes[0].legs[4].end_address = 'Store #5: ' + response.routes[0].legs[4].end_address;
  response.routes[0].legs[5].end_address = 'Store #6: ' + response.routes[0].legs[5].end_address;
  response.routes[0].legs[6].end_address = 'Store #7: ' + response.routes[0].legs[6].end_address;
  response.routes[0].legs[7].end_address = 'Store #8' + response.routes[0].legs[7].end_address;

proof of concept fiddle

screenshot of resulting map

code snippet:

function initialize() {
  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer;
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {
      lat: 41.85,
      lng: -87.65
    }
  });
  directionsDisplay.setMap(map);
  calculateAndDisplayRoute(directionsService, directionsDisplay);
}

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
  var waypts = [];
  waypts.push({
    location: "New York, NY",
    stopover: true
  });
  waypts.push({
    location: "Boston, MA",
    stopover: true
  });
  waypts.push({
    location: "Chicago, IL",
    stopover: true
  });
  waypts.push({
    location: "Madison, WI",
    stopover: true
  });
  waypts.push({
    location: "Denver, CO",
    stopover: true
  });
  waypts.push({
    location: "Salt Lake City UT",
    stopover: true
  });
  waypts.push({
    location: "Mesa, AZ",
    stopover: true
  });

  waypts.push({
    location: "Las Vegas, NV",
    stopover: true
  });



  directionsService.route({
    origin: "Newark, NJ",
    destination: "Los Angeles, CA",
    waypoints: waypts,
    optimizeWaypoints: true,
    travelMode: 'DRIVING'
  }, function(response, status) {
    if (status === 'OK') {
      response.routes[0].legs[0].start_address = 'Store #0: ' + response.routes[0].legs[0].start_address;
      response.routes[0].legs[1].start_address = 'Store #1: ' + response.routes[0].legs[1].start_address;
      response.routes[0].legs[2].start_address = 'Store #2: ' + response.routes[0].legs[2].start_address;
      response.routes[0].legs[3].start_address = 'Store #3: ' + response.routes[0].legs[3].start_address;
      response.routes[0].legs[4].start_address = 'Store #4: ' + response.routes[0].legs[4].start_address;
      response.routes[0].legs[5].start_address = 'Store #5: ' + response.routes[0].legs[5].start_address;
      response.routes[0].legs[6].start_address = 'Store #6: ' + response.routes[0].legs[6].start_address;
      response.routes[0].legs[7].start_address = 'Store #7: ' + response.routes[0].legs[7].start_address;
      response.routes[0].legs[0].end_address = 'Store #1: ' + response.routes[0].legs[0].end_address;
      response.routes[0].legs[1].end_address = 'Store #2: ' + response.routes[0].legs[1].end_address;
      response.routes[0].legs[2].end_address = 'Store #3: ' + response.routes[0].legs[2].end_address;
      response.routes[0].legs[3].end_address = 'Store #4: ' + response.routes[0].legs[3].end_address;
      response.routes[0].legs[4].end_address = 'Store #5: ' + response.routes[0].legs[4].end_address;
      response.routes[0].legs[5].end_address = 'Store #6: ' + response.routes[0].legs[5].end_address;
      response.routes[0].legs[6].end_address = 'Store #7: ' + response.routes[0].legs[6].end_address;
      response.routes[0].legs[7].end_address = 'Store #8' + response.routes[0].legs[7].end_address;
      // directionsDisplay.setDirections(response);


      directionsDisplay.setDirections(response);
      var route = response.routes[0];
      var summaryPanel = document.getElementById('directions-panel');
      directionsDisplay.setPanel(summaryPanel);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
<div id="directions-panel"></div>

Upvotes: 1

Related Questions