title: Google Maps, Directions and Places API to Generate Dynamic Directions
body: <p><strong>UPDATED CODE</strong>: 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.</p>
  
  <pre><code>// 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);
  </code></pre>
  
  <p><strong>END OF UPDATED CODE -------------------------------------------------------------------------------------------------</strong></p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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:</p>
  
  <pre><code>// 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);
  </code></pre>
  
  <p><strong>EDIT</strong>: Getting closer to the mark with: <a href="http://paste.laravel.com/1eHK" rel="nofollow">http://paste.laravel.com/1eHK</a> but I need now to only get the closest/first place result for each type.</p>
  
  <p>Seems a bit messy and overkill/not DRY but it works to a point.</p>