Google Maps API: Get airport name

Question

When I search for an airport, I get results like this:

Clicking on that first result, "LaGuardia Airport (LGA)", however gives me this place result:

{
  "address_components": [
    {
      "long_name": "New York",
      "short_name": "New York",
      "types": [
        "locality",
        "political"
      ]
    },
    {
      "long_name": "East Elmhurst",
      "short_name": "East Elmhurst",
      "types": [
        "neighborhood",
        "political"
      ]
    },
    {
      "long_name": "Queens",
      "short_name": "Queens",
      "types": [
        "sublocality_level_1",
        "sublocality",
        "political"
      ]
    },
    {
      "long_name": "Queens County",
      "short_name": "Queens County",
      "types": [
        "administrative_area_level_2",
        "political"
      ]
    },
    {
      "long_name": "New York",
      "short_name": "NY",
      "types": [
        "administrative_area_level_1",
        "political"
      ]
    },
    {
      "long_name": "United States",
      "short_name": "US",
      "types": [
        "country",
        "political"
      ]
    },
    {
      "long_name": "11371",
      "short_name": "11371",
      "types": [
        "postal_code"
      ]
    }
  ],
  "formatted_address": "New York, Queens, NY 11371, USA",
  "vicinity": "New York",
  "html_attributions": []
}

"LaGuardia Airport" nor "LGA" are anywhere in the result.

How can I get the the name of the place?

---

Here's the gist of my code:

const autocomplete = new gmaps.places.Autocomplete(addressInput, {}); // {types: ['address']}
autocomplete.setFields(['address_component','formatted_address','vicinity']);

autocomplete.addListener('place_changed', () => {
    let place = autocomplete.getPlace();

    if (place.address_components && place.address_components.length) {
        console.log(JSON.stringify(place, null, 2))
    }
}

Answer 1

The "name" of the place (in your case "LaGuardia Airport") is in the name attribute of the place object.

From the documentation:

name optional
Type: string optional
The Place’s name.

If you look at Google's Autocomplete example in the documentation: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete

infowindowContent.children["place-name"].textContent = place.name;

You will see it in the InfoWindow for the marker that is created when clicking on that entry.

proof of concept fiddle

code snippet:

// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&libraries=places">
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: 40.749933,
      lng: -73.98633
    },
    zoom: 13,
  });
  const card = document.getElementById("pac-card");
  const input = document.getElementById("pac-input");
  const biasInputElement = document.getElementById("use-location-bias");
  const strictBoundsInputElement = document.getElementById("use-strict-bounds");
  const options = {
    fields: ["formatted_address", "geometry", "name"],
    strictBounds: false,
    types: ["establishment"],
  };
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(card);
  const autocomplete = new google.maps.places.Autocomplete(input, options);
  // Bind the map's bounds (viewport) property to the autocomplete object,
  // so that the autocomplete requests use the current map bounds for the
  // bounds option in the request.
  autocomplete.bindTo("bounds", map);
  const infowindow = new google.maps.InfoWindow();
  const infowindowContent = document.getElementById("infowindow-content");
  infowindow.setContent(infowindowContent);
  const marker = new google.maps.Marker({
    map,
    anchorPoint: new google.maps.Point(0, -29),
  });
  autocomplete.addListener("place_changed", () => {
    infowindow.close();
    marker.setVisible(false);
    const place = autocomplete.getPlace();
    console.log(JSON.stringify(place))
    if (!place.geometry || !place.geometry.location) {
      // User entered the name of a Place that was not suggested and
      // pressed the Enter key, or the Place Details request failed.
      window.alert("No details available for input: '" + place.name + "'");
      return;
    }

    // If the place has a geometry, then present it on a map.
    if (place.geometry.viewport) {
      map.fitBounds(place.geometry.viewport);
    } else {
      map.setCenter(place.geometry.location);
      map.setZoom(17);
    }
    marker.setPosition(place.geometry.location);
    marker.setVisible(true);
    infowindowContent.children["place-name"].textContent = place.name;
    infowindowContent.children["place-address"].textContent =
      place.formatted_address;
    infowindow.open(map, marker);
  });

  // Sets a listener on a radio button to change the filter type on Places
  // Autocomplete.
  function setupClickListener(id, types) {
    const radioButton = document.getElementById(id);
    radioButton.addEventListener("click", () => {
      autocomplete.setTypes(types);
      input.value = "";
    });
  }
  setupClickListener("changetype-all", []);
  setupClickListener("changetype-address", ["address"]);
  setupClickListener("changetype-establishment", ["establishment"]);
  setupClickListener("changetype-geocode", ["geocode"]);
  biasInputElement.addEventListener("change", () => {
    if (biasInputElement.checked) {
      autocomplete.bindTo("bounds", map);
    } else {
      // User wants to turn off location bias, so three things need to happen:
      // 1. Unbind from map
      // 2. Reset the bounds to whole world
      // 3. Uncheck the strict bounds checkbox UI (which also disables strict bounds)
      autocomplete.unbind("bounds");
      autocomplete.setBounds({
        east: 180,
        west: -180,
        north: 90,
        south: -90
      });
      strictBoundsInputElement.checked = biasInputElement.checked;
    }
    input.value = "";
  });
  strictBoundsInputElement.addEventListener("change", () => {
    autocomplete.setOptions({
      strictBounds: strictBoundsInputElement.checked,
    });

    if (strictBoundsInputElement.checked) {
      biasInputElement.checked = strictBoundsInputElement.checked;
      autocomplete.bindTo("bounds", map);
    }
    input.value = "";
  });
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#description {
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
}

#infowindow-content .title {
  font-weight: bold;
}

#infowindow-content {
  display: none;
}

#map #infowindow-content {
  display: inline;
}

.pac-card {
  margin: 10px 10px 0 0;
  border-radius: 2px 0 0 2px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  outline: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  background-color: #fff;
  font-family: Roboto;
}

#pac-container {
  padding-bottom: 12px;
  margin-right: 12px;
}

.pac-controls {
  display: inline-block;
  padding: 5px 11px;
}

.pac-controls label {
  font-family: Roboto;
  font-size: 13px;
  font-weight: 300;
}

#pac-input {
  background-color: #fff;
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
  margin-left: 12px;
  padding: 0 11px 0 13px;
  text-overflow: ellipsis;
  width: 400px;
}

#pac-input:focus {
  border-color: #4d90fe;
}

#title {
  color: #fff;
  background-color: #4d90fe;
  font-size: 25px;
  font-weight: 500;
  padding: 6px 12px;
}

<!DOCTYPE html>
<html>

<head>
  <title>Place Autocomplete</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div class="pac-card" id="pac-card">
    <div>
      <div id="title">Autocomplete search</div>
      <div id="type-selector" class="pac-controls">
        <input type="radio" name="type" id="changetype-all" checked="checked" />
        <label for="changetype-all">All</label>

        <input type="radio" name="type" id="changetype-establishment" />
        <label for="changetype-establishment">Establishments</label>

        <input type="radio" name="type" id="changetype-address" />
        <label for="changetype-address">Addresses</label>

        <input type="radio" name="type" id="changetype-geocode" />
        <label for="changetype-geocode">Geocodes</label>
      </div>
      <br />
      <div id="strict-bounds-selector" class="pac-controls">
        <input type="checkbox" id="use-location-bias" value="" checked />
        <label for="use-location-bias">Bias to map viewport</label>

        <input type="checkbox" id="use-strict-bounds" value="" />
        <label for="use-strict-bounds">Strict bounds</label>
      </div>
    </div>
    <div id="pac-container">
      <input id="pac-input" type="text" placeholder="Enter a location" value="airport" />
    </div>
  </div>
  <div id="map"></div>
  <div id="infowindow-content">
    <span id="place-name" class="title"></span><br />
    <span id="place-address"></span>
  </div>

  <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=places&v=weekly&channel=2" async></script>
</body>

</html>