Google Maps, Directions and Places API to Generate Dynamic Directions

Question

UPDATED CODE: OK, I have this working the way I want it now, though I would like to order the results of the nearBy search by distance.

// Google Maps
var lat = $('#map').data('lat');
var lng = $('#map').data('lng');

var markerImage = {
    url: '/img/marker.png'
}

var eventTitle = $('.title').data('event-title');
var latLng = new google.maps.LatLng(lat, lng);
var trainDisplay = new google.maps.DirectionsRenderer();
var trainService = new google.maps.DirectionsService();
var busDisplay = new google.maps.DirectionsRenderer();
var busService = new google.maps.DirectionsService();
var airportDisplay = new google.maps.DirectionsRenderer();
var airportService = new google.maps.DirectionsService();

function initialise() {

    var mapOptions = {
        zoom: 15,
        center: latLng
    };

    map = new google.maps.Map(document.getElementById('map'), mapOptions);

    trainDisplay.setPanel(document.getElementById('train'));
    busDisplay.setPanel(document.getElementById('bus'));
    airportDisplay.setPanel(document.getElementById('airport'));

    var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        title: eventTitle,
        icon: markerImage
    });

    var trainRequest = {
        location: latLng,
        radius: '500',
        types: ['train_station']
    };

    var busRequest = {
        location: latLng,
        radius: '500',
        types: ['bus_station']
    };

    var airportRequest = {
        location: latLng,
        radius: '50000',
        types: ['airport']
    };

    var train = new google.maps.places.PlacesService(map);
    var bus = new google.maps.places.PlacesService(map);
    var airport = new google.maps.places.PlacesService(map);

    train.nearbySearch(trainRequest, trainRoute);
    bus.nearbySearch(busRequest, busRoute);
    airport.nearbySearch(airportRequest, airportRoute);
}

function trainRoute(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
        var request = {
            origin: results[0].geometry.location,
            destination: latLng,
            travelMode: google.maps.TravelMode.WALKING
        };
        var name = ' ' + results[0].name;
        $('#train h3').append(name);
        trainService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                trainDisplay.setDirections(response);
            }
        });
    }
}

function busRoute(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
        var request = {
            origin: results[0].geometry.location,
            destination: latLng,
            travelMode: google.maps.TravelMode.WALKING
        };
        var name = ' ' + results[0].name;
        $('#bus h3').append(name);
        busService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                busDisplay.setDirections(response);
            }
        });
    }
}

function airportRoute(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
        var request = {
            origin: results[0].geometry.location,
            destination: latLng,
            travelMode: google.maps.TravelMode.DRIVING
        };
        var name = ' ' + results[0].name;
        $('#airport h3').append(name);
        airportService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                airportDisplay.setDirections(response);
            }
        });
    }
}

google.maps.event.addDomListener(window, 'load', initialise);

END OF UPDATED CODE -------------------------------------------------------------------------------------------------

I want to generate dynamic directions results based on a specific lat/long for the destination while generating the origin based on the lat/long of closest type (train_station, bus_station and airport) to the destination.

I'm part way there as in I'm able to get a list of places and their related lat/long values based on a radius of '500' but I need to modify the code, so that it only gets the closest result for each type, so essentially the first found.

I'd also like to do it in a way where I am able to generate a result for each type. My code so far is:

// Google Maps
var lat = $('#map').data('lat');
var lng = $('#map').data('lng');

var markerImage = {
    url: '/img/marker.png'
}

var eventTitle = $('.title').data('event-title');
var latLng = new google.maps.LatLng(lat, lng);
var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();

function initialise() {

    var mapOptions = {
        zoom: 15,
        center: latLng
    };

    map = new google.maps.Map(document.getElementById('map'), mapOptions);

    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('directions'));

    var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        title: eventTitle,
        icon: markerImage
    });

    var request = {
        location: latLng,
        radius: '500',
        types: ['train_station']
    };

    var service = new google.maps.places.PlacesService(map);

    service.nearbySearch(request, calcRoute);
}

function calcRoute(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
        for (var i = 0, result; result = results[i]; i++) {
            var directionsRequest = {
                origin: result.geometry.location,
                destination: latLng,
                travelMode: google.maps.TravelMode.WALKING
            };
            directionsService.route(directionsRequest, function(response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                }
            });
        }
    }
}

google.maps.event.addDomListener(window, 'load', initialise);

EDIT: Getting closer to the mark with: http://paste.laravel.com/1eHK but I need now to only get the closest/first place result for each type.

Seems a bit messy and overkill/not DRY but it works to a point.

Answer 1

If you really want the first result (which I don't know that you do):

function calcRoute(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
          var directionsRequest = {
              origin: results[0].geometry.location,
              destination: latLng,
              travelMode: google.maps.TravelMode.WALKING
          };
          directionsService.route(directionsRequest, function(response, status) {
              if (status == google.maps.DirectionsStatus.OK) {
                  directionsDisplay.setDirections(response);
              } 
              else alert ("Directions request failed:"+status);
          });
    }
}

working example