Ganesh Nagargoje
Ganesh Nagargoje

Reputation: 11

Unable to Draw route using Direction API

I am using Google Map Direction API and trying to draw route for the following address.

  1. Braudstone Motors Ltd,Dublin,Ireland
  2. Red Cow Moran Hotel, Dublin, Ireland
  3. Campion Insurances Ltd, Dublin, Ireland

Following does not work for above mentioned address. Please help.

<script>
  function initMap() {
    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);

    document.getElementById('submit').addEventListener('click', function() {
      calculateAndDisplayRoute(directionsService, directionsDisplay);
    });
  }

  function calculateAndDisplayRoute(directionsService, directionsDisplay) {
    var waypts = [];
    var checkboxArray = document.getElementById('waypoints');
    for (var i = 0; i < checkboxArray.length; i++) {
      if (checkboxArray.options[i].selected) {
        waypts.push({
          location: checkboxArray[i].value,
          stopover: true
        });
      }
    }

    directionsService.route({
      origin: document.getElementById('start').value,
      destination: document.getElementById('end').value,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: 'DRIVING'
    }, function(response, status) {
      if (status === 'OK') {
        debugger;
        directionsDisplay.setDirections(response);
      } else {
        window.alert('Directions request failed due to ' + status);
      }
    });
  }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOURKEY&callback=initMap">
</script>

Upvotes: 0

Views: 147

Answers (1)

geocodezip
geocodezip

Reputation: 161334

Those are "places" not addresses. Use the Places API to get a placeId, or use their postal address.

See Geocoding Best Practices in the documentation

Use Case:

Ambiguous queries entered by a user (for example, incomplete or poorly formatted addresses)

Places API Place Autocomplete service to obtain a place ID, then the Geocoding API to geocode the place ID into a latlng.

proof of concept fiddle (looked the placeId's up on google's PlaceId Finder)

code snippet:

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script>
  function initMap() {
    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);

    document.getElementById('submit').addEventListener('click', function() {
      calculateAndDisplayRoute(directionsService, directionsDisplay);
    });
  }

  function calculateAndDisplayRoute(directionsService, directionsDisplay) {
    var waypts = [];
    /* Red Cow Moran Hotel, Dublin, Ireland
      Place ID ChIJX6NlcPMMZ0gRoG0Han_CNGE
      Naas Rd, Fox-And-Geese, Dublin 22, Ireland
      */
    waypts.push({
      location: {
        placeId: "ChIJX6NlcPMMZ0gRoG0Han_CNGE"
      },
      stopover: true
    });

    directionsService.route({
      /* Braudstone Motors Ltd
         Place ID ChIJCVY5DJkMZ0gRy_6zPWZZNkA
         39 Ballymount Rd Lower, Wilkinstown, Dublin 12, Ireland
      */
      origin: {
        placeId: "ChIJCVY5DJkMZ0gRy_6zPWZZNkA"
      },
      /* Campion Insurances Ltd, Dublin, Ireland
      Place ID ChIJIbEe7roMZ0gRspMhJ1yiado
      Second Floor, Otter House,, Naas Road, Fox-And-Geese, Dublin, Ireland
      */
      destination: {
        placeId: "ChIJIbEe7roMZ0gRspMhJ1yiado"
      },
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: 'DRIVING'
    }, function(response, status) {
      if (status === 'OK') {
        debugger;
        directionsDisplay.setDirections(response);
      } else {
        window.alert('Directions request failed due to ' + status);
      }
    });
  }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
<input id="start" value="Braudstone Motors Ltd,Dublin,Ireland" size="50" />
<br>
<input id="waypt" value="Red Cow Moran Hotel, Dublin, Ireland" size="50" />
<br>
<input id="end" value="Campion Insurances Ltd, Dublin, Ireland" size="50" />
<br>
<input id="submit" value="submit" type="button" />
<div id="map"></div>

Upvotes: 1

Related Questions