All geek questions in one place

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

A route is only created if I use the LatLng or String parameters, but I need to create it using PlaceId, but it does not 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 }
+5
source share
2 answers

You just need to pass the google.maps.Place object as the waypoint location. For instance:

 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 indicates the location of the waypoint, like LatLng, like google.maps.Place or as a string to be geocoded.

Google Maps - Direction Services Documentation

Here jsfiddle

+4
source

I get a javascript error with the published 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 indicate that location is the same as with origin and destination placeIds:

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

Description in documentation :

Google.maps.Place Object Specification

placeId | Type: string Identifier of the place of place (for example, business or point of interest). A place identifier is a unique identifier for a place in the Google Maps database. Please note that placeId is the most accurate way to determine a place. If possible, you should specify placeId, not placeQuery. The place ID can be obtained from any request in the Places API, for example TextSearch. Location identifiers can also be obtained from queries in the geocoding API. See Overview of Place Identifiers for more information.

proof of conceptual scripts

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"></script> <div id="map_canvas"></div>
+3
source

Source: https://habr.com/ru/post/1247590/

More articles:


All Articles