javascript - How do I match destinations in the google maps Distance Matrix -
i've got web app needs 'distance me' information properties displayed on map.
i'm using googles distance matrix service
distanceservice = new google.maps.distancematrixservice();
i'm calling service 1 origin , multiple destinations.
var params = { origins: [currentlocation], destinations: endpoints, travelmode: google.maps.travelmode.driving } distanceservice.getdistancematrix(params, savedistances);
my endpoints array of google.maps.latlng
objects taken properties. when results returned they've changed these addresses, , there's no longer reference latlng
's.
does know if distance matrix service guarantees return results in same order sent them? couldn't see in docs. don't want start calling geocoding services match properties (especially latlng
's return won't exact match)
they returned in same order sent.
that isn't stated, way read the documentation implied.
code snippet:
var service = new google.maps.distancematrixservice(); var places = [{ address: "new york, ny", lat: 40.7143528, lng: -74.0059731 }, { address: "tampa, fl", lat: 27.950575, lng: -82.4571776 }, { address: "newark, nj", lat: 40.735657, lng: -74.1723667 }, { address: "boston, ma", lat: 42.3584308, lng: -71.0597732 }, { address: "baltimore, md", lat: 39.2903848, lng: -76.6121893 }]; var foundlatlng = new google.maps.latlng(40.65, -73.95); // brooklyn, ny var gotoloc = []; (var = 0; < places.length; i++) { gotoloc.push(new google.maps.latlng(places[i].lat, places[i].lng)); } var service = new google.maps.distancematrixservice(); //request distance matrix var outputdiv = document.getelementbyid('info'); // var goto = new google.maps.latlng(places[i].lat, places[i].lng); function callback(response, status) { var distancefield = distancefield; if (status == google.maps.distancematrixstatus.ok) { var origins = response.originaddresses; var destinations = response.destinationaddresses; var htmlstring = "<table border='1'>"; var bounds = new google.maps.latlngbounds(); (var c = 0; c < response.rows.length; c++) { var results = response.rows[c].elements; (var r = 0; r < results.length; r++) { var element = results[r]; var distancetext = element.distance.text; var durationtext = element.duration.text; var = destinations[r]; htmlstring += "<tr><td>" + (r + 1) + "</td><td>" + places[r].address + "</td><td>" + response.originaddresses[c] + "</td><td>" + + "</td><td>" + distancetext + "</td><td>" + durationtext + "</td></tr>"; var marker = new google.maps.marker({ icon: 'http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/marker' + (r + 1) + '.png', position: { lat: places[r].lat, lng: places[r].lng }, map: map }); bounds.extend(marker.getposition()); } //end r } // end c map.fitbounds(bounds); htmlstring += "</table>"; document.getelementbyid('info').innerhtml = htmlstring; } //end if status=ok } //end callback // console.log(places); var map; var geocoder = new google.maps.geocoder(); function initialize() { var mapoptions = { zoom: 8, center: foundlatlng, maptypeid: google.maps.maptypeid.roadmap }; map = new google.maps.map(document.getelementbyid('map_canvas'), mapoptions); service.getdistancematrix({ origins: ["san diego, ca", foundlatlng], destinations: gotoloc, travelmode: google.maps.travelmode.walking, unitsystem: google.maps.unitsystem.imperial, avoidhighways: false, avoidtolls: false, }, callback); //end service.getdistancematrix() } google.maps.event.adddomlistener(window, 'load', initialize);
html, body { margin: 0; padding: 0; height: 100%; width: 100% } #map_canvas { height: 400px; width: 100%; } tr, td, tbody, table { height: 100%; width: 100%; } }
<script src="https://maps.googleapis.com/maps/api/js"></script> <table border="1"> <tr> <td> <div id="map_canvas"></div> </td> </tr> <tr> <td> <div id="info"></div> </td> </tr> </table>
Comments
Post a Comment