KellyMarchewa KellyMarchewa - 2 months ago 23
Javascript Question

Google Maps Api - Passing google.maps.Place to Direction Service

According to the Google documnetation, one can pass the Google Place ID of a location to the Direciton Service. However, regardless of what combination I try, I absolutely cannot get it to work; I am receiving a NOT_FOUND error. I have tried hard coding the id as a test to no avail.

The basic initialization code:

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var hotelMap;
var placesService;




function initialize() {

var mapOptions = {
center: { lat: 37.30138, lng: -89.57778},
zoom: 15,
};

hotelMap = new google.maps.Map(document.getElementById("googlemaps"), mapOptions);

var marker = new google.maps.Marker({
position:{ lat: 37.30138, lng: -89.57778},
map: hotelMap,
});

var info = new google.maps.InfoWindow({
content: "3265 William Street, Cape Girardeau, MO 63701"
});

marker.setMap(hotelMap);
info.open(hotelMap, marker);

directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(hotelMap);
directionsDisplay.setPanel(document.getElementById("directionModalBody"));

document.getElementById("searchButton").addEventListener("click", function() {

var keyword = document.getElementById("searchBox").value;
var requestOptions = {
location: { lat: 37.3011339, lng: -89.5770238},
radius: '5000',
keyword: keyword
};

placesService = new google.maps.places.PlacesService(hotelMap);
placesService.nearbySearch(requestOptions, findCallback);

});

}; // end initiallize


The window.onload function:

window.onload = function() {
initialize();
document.getElementById("calcDirections").onclick = function() {
if ($("#city").val() != null && $("#city").val() != "") {
findRoute();
} else {
alert("Please Enter a City");
}

}; // end onclick

$(".areaList").on("click", "a", function(e) {
e.preventDefault();
var placeID = $(this).attr("href");
locationRoute(placeID);
}) // end onclick

};


The problem function:

function locationRoute(locationID) {
var start = "ChIJfbJ8AyaId4gR4XCrciru2Qc";
var end = new google.maps.Place(locationID);
alert(locationID);
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
}; // end request object
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
document.getElementById("getDirectionButton").click();
} else {
alert(status);
}// end if
}); // end route
} // end findRoute


I have tried just passing the place IDs as a string with no success. I have tried prefixing them, again no success. It seems from the Google documentation, one needs to create a google.maps.Place object, but how? I consulted the documentation (https://developers.google.com/android/reference/com/google/android/gms/location/places/Place#getId()), but did not see a constructor. How can I resolve this issue? Thanks so much.

Answer

Try this

directionsService.route({
    origin: {placeId: start},
    destination: {placeId: locationID}
    ...
Comments