google-mapsgoogle-places-autocomplete

Google Places components restrictions don't work


Consider the following code according with google documentation that's a is the way to restrict place search by country. It literally follows what the official documentation says and it just doesn't work, I just want to restrict the search to the United States, but if I type for example "ch" the suggestions returns China.

Javascript:

"use strict";
/*
 * @license
 * Copyright 2025 Google LLC. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */

async function initMap() {
    
    // Request needed libraries.
    await google.maps.importLibrary("places");
    // Create the input HTML element, and append it.
    //@ts-ignore
    const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement({
  componentRestrictions: {country: ['us']},
});
    //@ts-ignore
    document.body.appendChild(placeAutocomplete);
    
    // Inject HTML UI.
    const selectedPlaceTitle = document.createElement('p');
    selectedPlaceTitle.textContent = '';
    document.body.appendChild(selectedPlaceTitle);
    const selectedPlaceInfo = document.createElement('pre');
    selectedPlaceInfo.textContent = '';
    document.body.appendChild(selectedPlaceInfo);
    
    // Add the gmp-placeselect listener, and display the results.
    //@ts-ignore
    placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {
        const place = placePrediction.toPlace();
        await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });
        selectedPlaceTitle.textContent = 'Selected Place:';
        selectedPlaceInfo.textContent = JSON.stringify(place.toJSON(), /* replacer */ null, /* space */ 2);
    });
    
}
initMap();

Solution

  • Had the same issue, turns out the example provided in the documentation just does not do what they say it does. To actually restrict search results by country use includedRegionCodes from here.

    You can define what results you want to see like so

    const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement(
                {includedRegionCodes:["FR"]});
    

    Proof of concept fiddle