Cómo limitar los resultados de autocompletar de Google solo a ciudad y país

198

Estoy usando google autocomplete places javascript para devolver los resultados sugeridos para mi cuadro de búsqueda, lo que necesito es mostrar solo la ciudad y el país relacionados con los caracteres ingresados, pero la API de google me dará muchos resultados de lugares generales que no necesito, así que cómo para limitar el resultado para mostrar solo la ciudad y el país.

Estoy usando el siguiente ejemplo:

<html>
<head>
<style type="text/css">
   body {
         font-family: sans-serif;
         font-size: 14px;
   }
</style>

<title>Google Maps JavaScript API v3 Example: Places Autocomplete</title>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places" type="text/javascript"></script>
<script type="text/javascript">
   function initialize() {
      var input = document.getElementById('searchTextField');
      var autocomplete = new google.maps.places.Autocomplete(input);
   }
   google.maps.event.addDomListener(window, 'load', initialize);
</script>

</head>
<body>
   <div>
      <input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on">
   </div>
</body>
</html>
javascript autocomplete google-maps-api-3 JohnTaa
fuente

Respuestas:

372

Puedes probar la restricción de país

function initialize() {

 var options = {
  types: ['(cities)'],
  componentRestrictions: {country: "us"}
 };

 var input = document.getElementById('searchTextField');
 var autocomplete = new google.maps.places.Autocomplete(input, options);
}

Más información:

ISO 3166-1 alpha-2 se puede utilizar para restringir los resultados a grupos específicos. Actualmente, puede usar las restricciones de componentes para filtrar por país.

El país debe pasar como un código de país compatible con Alpha-2 ISO 3166-1 de dos caracteres.

Códigos de país asignados oficialmente

Francois
fuente
¿Sabe si hay algún límite de uso en las consultas de autocompletar si no estoy cargando ningún mapa? Sé que hay un límite de uso de 25,000 si cargo mapas
Mithil
44
Es agosto de 2014. ¿Ya es posible mostrar solo países y ciudades? Por ejemplo, cuando escribo Mil, el resultado es Milán, Bérgamo, Italia. Solo necesito Milán, Italia. Agregar todos los países uno por uno no es una opción.
erdomester
2
¿Es posible especificar más de un país?
bart
2
@bart aparentemente no es posible. Destaque este problema si desea esa función.
dlsso
1
si usamos tipos: ['(ciudades)'] entonces no nos permitirá buscar por código postal aquí.
Mohneesh Agrawal
23 

<html>
<head>
<style type="text/css">
   body {
         font-family: sans-serif;
         font-size: 14px;
   }
</style>

<title>Google Maps JavaScript API v3 Example: Places Autocomplete</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>
<script type="text/javascript">
   function initialize() {
      var input = document.getElementById('searchTextField');
      var options = {
        types: ['geocode'] //this should work !
      };
      var autocomplete = new google.maps.places.Autocomplete(input, options);
   }
   google.maps.event.addDomListener(window, 'load', initialize);
</script>

</head>
<body>
   <div>
      <input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on">
   </div>
</body>
</html>
Expandir fragmento

var options = {
  types: ['geocode'] //this should work !
};
var autocomplete = new google.maps.places.Autocomplete(input, options);

referencia a otros tipos: http://code.google.com/apis/maps/documentation/places/supported_types.html#table2

UnLoCo
fuente
1
verifique este código directamente desde google. hicieron un ejemplo de filtrado code.google.com/apis/maps/documentation/javascript/…
UnLoCo
el objeto de autocompletar no aceptará dos variables, solo se puede aceptar una variable que es 'geocode'. No sé cómo resolver este problema. La documentación de Google enumera muchos tipos, pero ninguno puede ser aceptado.
JohnTaa
¿funcionarían los mismos parámetros AutocompleteService?
Steven Aguilar
12

prueba esto 

<html>
<head>
<style type="text/css">
   body {
         font-family: sans-serif;
         font-size: 14px;
   }
</style>

<title>Google Maps JavaScript API v3 Example: Places Autocomplete</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places&region=in" type="text/javascript"></script>
<script type="text/javascript">
   function initialize() {
      var input = document.getElementById('searchTextField');
      var autocomplete = new google.maps.places.Autocomplete(input);
   }
   google.maps.event.addDomListener(window, 'load', initialize);
</script>

</head>
<body>
   <div>
      <input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on">
   </div>
</body>
</html>
Expandir fragmento

http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places "type =" text / javascript "

Cambie esto a: "region = in" (in = india)

" http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places®ion=in " type = "text / javascript"

Ravindra
fuente
Necesitamos lista de ciudades, estados, lista de lista de zonas y así sucesivamente
Shadab K
Esta debería ser la respuesta aceptada. La forma más simple y rápida de lograr el resultado que pide el OP. Y funcionó para mí.
user2056633
9

La respuesta dada por Francois da como resultado una lista de todas las ciudades de un país. Pero si el requisito es enumerar todas las regiones (ciudades + estados + otras regiones, etc.) en un país o los establecimientos en el país, puede filtrar los resultados en consecuencia cambiando los tipos.

Enumerar solo ciudades en el país 

 var options = {
  types: ['(cities)'],
  componentRestrictions: {country: "us"}
 };

Listar todas las ciudades, estados y regiones del país.

 var options = {
  types: ['(regions)'],
  componentRestrictions: {country: "us"}
 };

Enumere todos los establecimientos, como restaurantes, tiendas y oficinas en el país.

  var options = {
      types: ['establishment'],
      componentRestrictions: {country: "us"}
     };

Más información y opciones disponibles en

https://developers.google.com/maps/documentation/javascript/places-autocomplete

Espero que esto pueda ser útil para alguien

Kiran Muralee
fuente
9

Básicamente igual que la respuesta aceptada, pero actualizada con un nuevo tipo y restricciones de múltiples países:

function initialize() {

 var options = {
  types: ['(regions)'],
  componentRestrictions: {country: ["us", "de"]}
 };

 var input = document.getElementById('searchTextField');
 var autocomplete = new google.maps.places.Autocomplete(input, options);
}

Usar en '(regions)'lugar de '(cities)'permite buscar por código postal, así como por el nombre de la ciudad.

Consulte la documentación oficial, Tabla 3: https://developers.google.com/places/supported_types

seBaka28
fuente
8

He estado jugando un poco con la API de autocompletado de Google y esta es la mejor solución que pude encontrar para limitar sus resultados a solo países:

var autocomplete = new google.maps.places.Autocomplete(input, options);
var result = autocomplete.getPlace();
console.log(result); // take a look at this result object
console.log(result.address_components); // a result has multiple address components

for(var i = 0; i < result.address_components.length; i += 1) {
  var addressObj = result.address_components[i];
  for(var j = 0; j < addressObj.types.length; j += 1) {
    if (addressObj.types[j] === 'country') {
      console.log(addressObj.types[j]); // confirm that this is 'country'
      console.log(addressObj.long_name); // confirm that this is the country name
    }
  }
}

Si observa el objeto de resultado que se devuelve, verá que hay una matriz address_components que contendrá varios objetos que representan diferentes partes de una dirección. Dentro de cada uno de estos objetos, contendrá una matriz de 'tipos' y dentro de esta matriz de 'tipos', verá las diferentes etiquetas asociadas con una dirección, incluida una para el país.

wmock
fuente
¿Hay alguna manera de restringir solo a ciertos estados en los EE. UU., O incluso excluir estados particulares?
Martin Erlic
@santafebound Estoy tratando de hacer lo mismo (para un estado específico en Australia). De la documentación parece que la respuesta es 'No [t todavía]', pero espero encontrar una manera de interceptar el responseobjeto y restringirlo por otras claves en los datos.
GT.
4

¡También deberá hacer zoom y centrar el mapa debido a las restricciones de su país!

¡Solo use los parámetros de zoom y centro! ;)

function initialize() {
  var myOptions = {
    zoom: countries['us'].zoom,
    center: countries['us'].center,
    mapTypeControl: false,
    panControl: false,
    zoomControl: false,
    streetViewControl: false
  };

  ... all other code ...

}
Kir Mazur
fuente
4

Encontré una solución para mí

var acService = new google.maps.places.AutocompleteService();
var autocompleteItems = [];

acService.getPlacePredictions({
    types: ['(regions)']
}, function(predictions) {
    predictions.forEach(function(prediction) {
        if (prediction.types.some(function(x) {
                return x === "country" || x === "administrative_area1" || x === "locality";
            })) {
            if (prediction.terms.length < 3) {
                autocompleteItems.push(prediction);
            }
        }
    });
});

esta solución solo muestra ciudad y país ..

Cenk YAGMUR
fuente
¿Puede proporcionar la lista de códigos completa con autocompletar
Volodymyr Khmil
2 
<html>
  <head>
    <title>Example Using Google Complete API</title>   
  </head>
  <body>

<form>
   <input id="geocomplete" type="text" placeholder="Type an address/location"/>
    </form>
   <script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

  <script src="http://ubilabs.github.io/geocomplete/jquery.geocomplete.js"></script>
  <script>
   $(function(){        
    $("#geocomplete").geocomplete();                           
   });
  </script>
 </body>
</html>

Para más información visite este enlace

Hina Vaja
fuente