Search code examples
javascriptgoogle-mapsgoogle-maps-api-3driving-directions

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


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


Solution

  • 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>