Pass Place Id Location To Destination In Google Maps Api

I'm trying to figure out how to pass the geometry location of a Google Places location to the directions service request destination dynamically. If I use service.getDetails({

Solution 1:

Simplest way: pass the placeId directly into the DirectionsRequest

proof of concept fiddle

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);

functioninitialize() {
  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);
}

functioncalculateAndDisplayRoute(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
}

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

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

proof of concept fiddle

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);

functioninitialize() {
  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);

    }
  });


}

functioncalculateAndDisplayRoute(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
}

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