Gmaps.js Route with Distance

Question

I'm using Gmaps.js api in a little project I'm building.

Basically to replicate Google Maps functionality I'm looking to get the route & distance from one address to another (can just be input/form fields). I notice this demo, but it requires clicking on the map, and also doesn't show the total distance or drive time?

Any opinions on best way of parsing 2 addresses from a form, then calculating route and drive time using the gmaps.js api?

Answer 1

Breaking this into parts you need to:

1. Search your form entered addresses and geocode them using the geocoding API.
2. Use the results from the geocoding to calculate the route.
3. Pull required data from the route and plot/display

For Geocoding see this example: http://hpneo.github.io/gmaps/examples/geocoding.html

GMaps.geocode({
  address: $('#Start').val(),
  callback: function(results, status) {
    if (status == 'OK') {
      var latlng1 = results[0].geometry.location;
    }
  }
}); //Repeat for destination / end point

Now you have your lat/long points.

You can then take a few approaches to route, but just drawing it can be done like this example: http://hpneo.github.io/gmaps/examples/routes.html

map.drawRoute({
  origin: [latlng1.lat(), latlng1.lng()],
  destination: [latlng2.lat(), latlng2.lng()],
  travelMode: 'driving',
  strokeColor: '#131540',
  strokeOpacity: 0.6,
  strokeWeight: 6
});

If you call getRoutes instead of drawRoute you should get back a DirectionsResult object: https://developers.google.com/maps/documentation/javascript/directions#DirectionsResults . The TransitDetails object contains information on the travel time to the end location in the form of arrival time. Each leg will also contain a duration and distance which you can add up looping through them and access something like:

foreach($directions->routes[0]->legs as $leg) {
    $time+=$leg.duration.value
    $distance+=$leg.distance.value
}

Update:

Was playing with the API - and excuse the nested callbacks - but here is a working example: http://jsfiddle.net/mdares/82Dp2/

jQuery(document).ready(function () {
    var map;
    var latlng1;
    var latlng2;

    GMaps.geocode({
        address: $('#Start').val(),
        callback: function (results, status) {
            if (status == 'OK') {
                latlng1 = results[0].geometry.location;
                GMaps.geocode({
                    address: $('#End').val(),
                    callback: function (results, status) {
                        if (status == 'OK') {
                            latlng2 = results[0].geometry.location;
                            map = new GMaps({
                                div: '#map',
                                lat: latlng1.lat(),
                                lng: latlng1.lng(),
                                zoom: 12
                            });

                            map.drawRoute({
                                origin: [latlng1.lat(), latlng1.lng()],
                                destination: [latlng2.lat(), latlng2.lng()],
                                travelMode: 'driving',
                                strokeColor: '#131540',
                                strokeOpacity: 0.6,
                                strokeWeight: 6
                            });
                            map.getRoutes({
                                origin: [latlng1.lat(), latlng1.lng()],
                                destination: [latlng2.lat(), latlng2.lng()],
                                callback: function (e) {
                                    var time = 0;
                                    var distance = 0;
                                    for (var i=0; i<e[0].legs.length; i++) {
                                        time += e[0].legs[i].duration.value;
                                        distance += e[0].legs[i].distance.value;
                                    }
                                    alert(time + " " + distance);
                                }
                            });

                        }
                    }
                });
            }
        }
    });
});