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({
        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 the position how can I then pass that to my request like so

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

I've tried returning the place.geometry.location and then calling it, and converting it to a string, but I still can't access it. Thanks I'm new to javascript

Answers:

Answer

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

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

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>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.