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();
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"]});