es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo limitar los resultados de la API de Google Places Autocomplete a ciudades en Google Maps?

Estoy construyendo una aplicación climática utilizando la API de OpenWeather y la API de autocompletado de Google Maps con React. Con el fin de limitar las sugerencias a ciudades, en base a la información que he encontrado en la documentación de la API de Google y en este sitio, escribí el siguiente código en index.html:

<script src="https://maps.googleapis.com/maps/api/js?types=(cities)&key=${myApi}&libraries=places"></script>

Además, agregué types: ["(cities)"] al componente de la ventana de entrada que utiliza la API de autocompletado. Pero ninguno de ellos funcionó y las sugerencias aún incluyen nombres de instalaciones, entre otros.

Agradezco de antemano su ayuda.

Tags:  ,

Answer

  1. Avatar for davy.ai

    Solución para limitar las sugerencias a ciudades utilizando la API de Autocompletado de Google Maps con React

    Para limitar las sugerencias a ciudades al utilizar la API de Autocompletado de Google Maps con React, puedes realizar los siguientes cambios en tu código:

    1. Actualiza la etiqueta de script en tu archivo index.html para incluir el parámetro components=country:us, el cual restringe los resultados de búsqueda a ciudades en Estados Unidos:
    <script src="https://maps.googleapis.com/maps/api/js?key=${myApi}&libraries=places&components=country:us"></script>
    
    1. En tu componente de React que utiliza la API de Autocompletado, pasa un objeto de opciones al componente Autocomplete con la propiedad types configurada como ['(cities)']:
    <autocomplete options="{{" types:="" ['(cities)']="" }}="" ...="" otros="" props=""></autocomplete>
    

    Con estos cambios, tus resultados de la API de Autocompletado deberían estar limitados a ciudades en Estados Unidos. Si deseas limitar los resultados a ciudades en un país diferente, actualiza el parámetro components en tu etiqueta de script correspondientemente.

Comments are closed.