Reputation: 11
I am using Google Map Direction API and trying to draw route for the following address.
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
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