How do I get Google Maps Directions API to choose the correct Airport?

Question

When I ask google for directions, both "MMU" and "MMU Airport" work fine, but when I use the API it keeps going to MLU airport... what gives?

Code:

var directionService = new google.maps.DirectionsService;
var geocoder = new google.maps.Geocoder;
directionService.route({
        origin: $('#selAirport').val() + ' Airport',
        destination: $('#selZIPZone').val(),
        travelMode: google.maps.TravelMode.DRIVING
    },
    function(response, status) {
        console.log(response, status);
        ...

dev-tools photo showing it received "MMU Airport" as the origin, but set the Start Address to MLU Airport instead

Answer 1

That looks like a data problem. The directions service/geocoder recognize Morristown Municipal Airport, but not MMU. I reported that through the Google Maps "report an error" (lower right hand corner of the map), not sure if it will be accepted.

code snippet:

var geocoder;
var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var directionService = new google.maps.DirectionsService();
  var directionsDisplay = new google.maps.DirectionsRenderer({
    map: map
  });
  directionService.route({
      origin: 'Morristown Airport',
      destination: "Florham Park , NJ",
      travelMode: google.maps.TravelMode.DRIVING
    },
    function(response, status) {
      if (status === google.maps.DirectionsStatus.OK) {
        console.log(response);
        directionsDisplay.setDirections(response);
      } else {
        window.alert('Directions request failed due to ' + status);
      }
    });
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>

Answer 2

Taking into account your last comment it looks like you have an autocomplete of places library. In this case you can retrieve the place ID from the autocomplete element and pass it to directions service. This way you will be sure that directions service is working with an exact choice of the user.

Please look at this example and use autocomplete to search your route:

http://jsbin.com/xuyisem/edit?html,output

code snippet:

var directionsDisplay;
var directionsService;
var map;
var placeId1, placeId2;      

function initialize() {
    directionsService = new google.maps.DirectionsService();
    directionsDisplay = new google.maps.DirectionsRenderer({
        draggable: true
    });
    var mapOptions = {
        zoom:10,
        center: new google.maps.LatLng(32.5101466,-92.0436835) 
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    directionsDisplay.setMap(map);
  
    var inputFrom = document.getElementById('from');
    var autocompleteFrom = new google.maps.places.Autocomplete(inputFrom, {});
    autocompleteFrom.bindTo('bounds', map);
    autocompleteFrom.addListener('place_changed', function() {
        var place = autocompleteFrom.getPlace();
        placeId1 = place.place_id;
    });
  
    var inputTo = document.getElementById('to');
    var autocompleteTo = new google.maps.places.Autocomplete(inputTo, {});
    autocompleteTo.bindTo('bounds', map);
    autocompleteTo.addListener('place_changed', function() {
        var place = autocompleteTo.getPlace();
        placeId2 = place.place_id;
    });
}

function calcRoute() {
    if (!placeId1) {
        alert("Please select origin");
        return;
    }
    if (!placeId2) {
        alert("Please select destination");
        return;
    }
    var start = {
        placeId: placeId1
    };
    var end = {
        placeId: placeId2
    };
    var request = {
        origin: start,
        destination:end,
        travelMode: google.maps.TravelMode.DRIVING,
        provideRouteAlternatives: false
    };
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }
    });
}

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<input type="text" name="from" id="from" placeholder="Select origin" />
<input type="text" name="to" id="to" placeholder="Select destination" />
<input type="button" name="calcroute" value="Get route" onclick="calcRoute();return false;" />
<div id="map-canvas"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places&callback=initialize"></script>