Google Maps API (JS) Create a route using PlaceId in waypoints

问题

The route create only if I use LatLng or String params but I need create it by PlaceId but it doesn't work

example:

directionsService.route({
        origin: {'placeId': 'ChIJc1lGdwfP20YR3lGOMZD-GTM'},
        destination: {'placeId': 'ChIJdTGhqsbP20YR6DZ2QMPnJk0'},
        waypoints: [{stopover: true, location: new google.maps.Place('ChIJRVj1dgPP20YRBWB4A_sUx_Q')}],
        optimizeWaypoints: true,
        travelMode: google.maps.TravelMode.DRIVING
    }

回答1:

Just need to pass the google.maps.Place object as the waypoint location. For example:

directionsService.route({
    origin: { placeId: "ChIJc1lGdwfP20YR3lGOMZD-GTM" },
    destination: { placeId: "ChIJdTGhqsbP20YR6DZ2QMPnJk0" },
    waypoints: [{ stopover: true, location: { placeId: "ChIJRVj1dgPP20YRBWB4A_sUx_Q" } }],
    optimizeWaypoints: true,
    travelMode: google.maps.TravelMode.DRIVING
}

location specifies the location of the waypoint, as a LatLng, as a google.maps.Place object or as a String which will be geocoded.

Google Maps - Direction Services Documentation

Here's the JsFiddle

回答2:

I get a javascript error with the posted code: Uncaught TypeError: google.maps.Place is not a constructor on this line:

waypoints: [{stopover: true, location: new google.maps.Place('ChIJRVj1dgPP20YRBWB4A_sUx_Q')}],

You need to specify that location the same way you do with the origin and destination placeIds:

waypoints: [{
  stopover: true,
  location: {'placeId':"ChIJRVj1dgPP20YRBWB4A_sUx_Q"}
}],

Description in the documentation:

Google.maps.Place object specification

placeId | Type: string The place ID of the place (such as a business or point of interest). The place ID is a unique identifier of a place in the Google Maps database. Note that the placeId is the most accurate way of identifying a place. If possible, you should specify the placeId rather than a placeQuery. A place ID can be retrieved from any request to the Places API, such as a TextSearch. Place IDs can also be retrieved from requests to the Geocoding API. For more information, see the overview of place IDs.

proof of concept fiddle

code snippet:

function initialize() {
  var map = new google.maps.Map(document.getElementById("map_canvas"));
  var directionsService = new google.maps.DirectionsService();
  var directionsDisplay = new google.maps.DirectionsRenderer({
    map: map
  });
  directionsService.route({
    origin: {
      'placeId': 'ChIJc1lGdwfP20YR3lGOMZD-GTM'
    },
    destination: {
      'placeId': 'ChIJdTGhqsbP20YR6DZ2QMPnJk0'
    },
    waypoints: [{
      stopover: true,
      location: {
        'placeId': "ChIJRVj1dgPP20YRBWB4A_sUx_Q"
      }
    }],
    optimizeWaypoints: true,
    travelMode: google.maps.TravelMode.DRIVING
  }, function(response, status) {
    if (status === '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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>

来源：https://stackoverflow.com/questions/36763790/google-maps-api-js-create-a-route-using-placeid-in-waypoints

标签

javascript

google-maps

google-maps-api-3

direction