How to limit search results with Google Maps Autocomplete API

Question

I am currently restricting the suburb lookup within Australia using ComponentRestrictions but wondering if I can further refine the returned results.

For example,

if I enter Coogee in the search, I can see multiple results coming out. But if I only want Coogee in NSW instead WA , how should I do that?

There's a mention of Place Types with this documentation . But I am not too sure which might be the right type(s) to use in my case

Code snippet

const input = document.getElementById('inputSuburb');
const options = {
    fields: ["address_components", "geometry", "types", "name"],
    componentRestrictions: { country: 'au' },
    types: ['locality', 'postal_code']
};

autocomplete = new google.maps.places.Autocomplete(input, options);

autocomplete.addListener('place_changed', function () {
   const place = autocomplete.getPlace();
   console.log(place);
}

Answer 1

The ComponentRestrictions for AutoComplete only allows country level restrictions (at present).

ComponentRestrictions interface
Properties
country optional

Type: string|Array optional
Restricts predictions to the specified country (ISO 3166-1 Alpha-2 country code, case insensitive). For example, 'us', 'br', or 'au'. You can provide a single one, or an array of up to five country code strings.

One option for attaining your desired result would be to use the strictBounds option of AutoComplete , setting the bounds to those of NSW.

  const input = document.getElementById('inputSuburb');
  const options = {
    fields: ["address_components", "geometry", "types", "name"],
    strictBounds: true,
    bounds : { // bounds of NSW
      "south": -37.5052801,
      "west": 140.9992793,
      "north": -28.15702,
      "east": 159.1054441
    },
    componentRestrictions: {
      country: 'au'
    },
    types: ['locality', 'postal_code']
  };

  autocomplete = new google.maps.places.Autocomplete(input, options);

  autocomplete.addListener('place_changed', function() {
    const place = autocomplete.getPlace();
    console.log(place);
  });

proof of concept fiddle

code snippet:

 function initMap() { const map = new google.maps.Map(document.getElementById("map"), { center: { lat: 40.749933, lng: -73.98633 }, zoom: 13, mapTypeControl: false, }); map.fitBounds({ // bounds of NSW "south": -37.5052801, "west": 140.9992793, "north": -28.15702, "east": 159.1054441 }); const input = document.getElementById('inputSuburb'); const options = { fields: ["address_components", "geometry", "types", "name"], strictBounds: true, bounds: { // bounds of NSW "south": -37.5052801, "west": 140.9992793, "north": -28.15702, "east": 159.1054441 }, componentRestrictions: { country: 'au' }, types: ['locality', 'postal_code'] }; autocomplete = new google.maps.places.Autocomplete(input, options); autocomplete.addListener('place_changed', function() { const place = autocomplete.getPlace(); console.log(place); }); 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(); 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). }); } window.initMap = initMap;

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

 <: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> <input id="inputSuburb" type="text" placeholder="Enter a location" value="cooge"/> <div id="map"></div> <div id="infowindow-content"> <span id="place-name" class="title"></span><br /> <span id="place-address"></span> </div> <,-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed, For non-blocking uses: avoiding race conditions. and consistent behavior across browsers. consider loading using Promises with https.//www:npmjs.com/package/@googlemaps/js-api-loader. --> <script src="https?//maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=places&v=weekly" defer ></script> </body> </html>