Pass Place Destination ID in the Google Maps API

Question

I'm trying to figure out how to dynamically move the location geometry location in Google Places in the dynamic direction of a route service request. If i use

service.getDetails({ placeId: 'ChIJy_YmBMEMIocRZF8r5wPFMYU' }, function(place, status) { if (status === google.maps.places.PlacesServiceStatus.OK) { var marker = new google.maps.Marker({ map: map, position: place.geometry.location, icon: 'img/pillicon.jpg' }); } 

to get a position, how can I pass this to my request like this

 var request = { origin: currentLoc, destination: place.geometry.location, //not sure about this travelMode: google.maps.DirectionsTravelMode.DRIVING }; 

I tried returning place.geometry.location and then calling it and converting it to a string, but I still cannot access it. Thank you for being new to javascript

Answer 1

The easiest way: pass placeId directly to DirectionsRequest

proof of conceptual scripts

code snippet:

 var geocoder; var map; var service; var directionsService = new google.maps.DirectionsService(); var directionsDisplay = new google.maps.DirectionsRenderer(); var curLoc = new google.maps.LatLng(35.0853336, -106.6055534); function initialize() { var map = new google.maps.Map( document.getElementById("map_canvas"), { center: new google.maps.LatLng(37.4419, -122.1419), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }); directionsDisplay.setMap(map); calculateAndDisplayRoute(curLoc, { placeId: 'ChIJy_YmBMEMIocRZF8r5wPFMYU' }, directionsService, directionsDisplay); } function calculateAndDisplayRoute(start, end, directionsService, directionsDisplay) { directionsService.route({ origin: start, destination: end, travelMode: google.maps.TravelMode.DRIVING }, function(response, status) { if (status === google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } else { window.alert('Directions request failed due to ' + status); } }); } google.maps.event.addDomListener(window, "load", initialize); 

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

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

Most likely your problem is that PlacesService is asynchronous, you need to use the result returned inside its callback procedure.

proof of conceptual scripts

code snippet:

 var geocoder; var map; var service; var directionsService = new google.maps.DirectionsService(); var directionsDisplay = new google.maps.DirectionsRenderer(); var curLoc = new google.maps.LatLng(35.0853336, -106.6055534); function initialize() { var map = new google.maps.Map( document.getElementById("map_canvas"), { center: new google.maps.LatLng(37.4419, -122.1419), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }); directionsDisplay.setMap(map); service = new google.maps.places.PlacesService(map); service.getDetails({ placeId: 'ChIJy_YmBMEMIocRZF8r5wPFMYU' }, function(place, status) { if (status === google.maps.places.PlacesServiceStatus.OK) { var marker = new google.maps.Marker({ map: map, position: place.geometry.location, icon: 'http://maps.google.com/mapfiles/ms/micons/blue.png' }); map.setCenter(marker.getPosition()); calculateAndDisplayRoute(curLoc, marker.getPosition(), directionsService, directionsDisplay); } }); } function calculateAndDisplayRoute(start, end, directionsService, directionsDisplay) { directionsService.route({ origin: start, destination: end, travelMode: google.maps.TravelMode.DRIVING }, function(response, status) { if (status === google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } else { window.alert('Directions request failed due to ' + status); } }); } google.maps.event.addDomListener(window, "load", initialize); 

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

 <script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> <div id="map_canvas"></div>