Using longitude / latitude as a waypoint

Question

I am trying to use longitude latitude as a waypoint on my google maps and cannot make it work.

Here how my values ​​are popped

waypts_mtlsheloc.push({ location: (45.658197,-73.636333), //I don't think I'm supposed to write this like that. But can't find the right way. stopover: true }) 

And then try changing my line as follows

 service.route({ origin: latlng_mtlsheloc[0], destination: latlng_mtlsheloc[latlng_mtlsheloc.length - 1], waypoints:waypts_mtlsheloc, travelMode: google.maps.DirectionsTravelMode.DRIVING }, function(result, status) { console.log(status) if (status == google.maps.DirectionsStatus.OK) { path = path.concat(result.routes[0].overview_path); line_mtlsheloc.setPath(result.routes[0].overview_path); } }); 

But this gives me the error "Error in the [waypoint] properties", I tried different ways to record the location, but I can not find the right one.

Answer 1

To use latitude and longitude as a waypoint, it must be a google.maps.LatLng object (the documentation says a string or a LatLng string; a string is an address, LatLng is a geographic coordinate)

 waypts_mtlsheloc.push({ location: new google.maps.LatLng(45.658197,-73.636333), stopover: true }) 

Working example

jsfiddle

code snippet:

 var directionDisplay; var directionsService = new google.maps.DirectionsService(); var map; function initialize() { directionsDisplay = new google.maps.DirectionsRenderer(); var chicago = new google.maps.LatLng(41.850033, -87.6500523); var myOptions = { zoom: 6, mapTypeId: google.maps.MapTypeId.ROADMAP, center: chicago } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); directionsDisplay.setMap(map); calcRoute(); } function calcRoute() { var request = { origin: "1521 NW 54th St, Seattle, WA 98107 ", destination: "San Diego, CA", waypoints: [{ location: new google.maps.LatLng(42.496403, -124.413128), stopover: false }], optimizeWaypoints: true, travelMode: google.maps.DirectionsTravelMode.WALKING }; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); var route = response.routes[0]; var summaryPanel = document.getElementById("directions_panel"); summaryPanel.innerHTML = ""; // For each route, display summary information. for (var i = 0; i < route.legs.length; i++) { var routeSegment = i + 1; summaryPanel.innerHTML += "<b>Route Segment: " + routeSegment + "</b><br />"; summaryPanel.innerHTML += route.legs[i].start_address + " to "; summaryPanel.innerHTML += route.legs[i].end_address + "<br />"; summaryPanel.innerHTML += route.legs[i].distance.text + "<br /><br />"; } } else { alert("directions response " + status); } }); } google.maps.event.addDomListener(window, "load", initialize); 

 html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } 

 <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map_canvas" style="float:left;width:70%;height:100%;"></div> <div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px"> <div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div> </div>