Question

142

Using Longitude/Latitude as Waypoint

rated 0 times [ 143] [ 1] / answers: 1 / hits: 19063 / 12 Years ago, wed, october 3, 2012, 12:00:00

I'm trying to use the longitude latitude as a waypoint in my google maps and cant seem to get it working.

Here's how I have my values pushed

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 to modify my line like this

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 it gives me an error Error in property [waypoint], I've tried different methods of writing down the location, but can't seem to find the right one.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

leighrheac

Add To Favorites

Follow

Total Points: 313

Total Questions: 92

Total Answers: 94

Location: Papua New Guinea

Member since Thu, May 7, 2020

4 Years ago

answered 12 Years ago ronans · Accepted Answer

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

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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk></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>