Como limitar os resultados do preenchimento automático do Google apenas para cidade e país

198

Estou usando o javascript de lugares de preenchimento automático do google para retornar resultados sugeridos para minha caixa de pesquisa. O que preciso é mostrar apenas a cidade e o país relacionados aos caracteres inseridos, mas a API do Google fornecerá muitos resultados gerais de lugares dos quais não preciso, então como para limitar o resultado para mostrar apenas a cidade e o país.

Estou usando o seguinte exemplo:

<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
fonte

372

Você pode tentar a restrição do 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);
}

Mais informações:

A ISO 3166-1 alfa-2 pode ser usada para restringir os resultados a grupos específicos. Atualmente, você pode usar as restrições de componentes para filtrar por país.

O país deve ser passado como um código de país compatível com ISO 3166-1 Alpha-2 de dois caracteres.

Códigos de país oficialmente designados

— François
fonte

Você sabe se há algum limite de uso em consultas automáticas, se eu não estiver carregando nenhum mapa? Eu sei que há um limite de uso de 25.000 se eu carregar mapas

— Mithil 29/03

4

É agosto de 2014. Já é possível mostrar apenas países e cidades? Por exemplo, quando eu digito Mil, o resultado é Milão, Bergamo, Itália. Eu preciso apenas de Milão, Itália. Adicionar todos os países um por um não é uma opção.

— precisa saber é o seguinte

2

É possível especificar mais de um país?

— Bart

2

@ Bart aparentemente não é possível. Marque esta edição com estrela se desejar esse recurso.

— precisa saber é o seguinte

1

se usarmos tipos: ['(cidades)'], não será permitido pesquisar por CEP aqui.

— Mohneesh Agrawal 29/08/16

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 snippet

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

referência a outros tipos: http://code.google.com/apis/maps/documentation/places/supported_types.html#table2

— UnLoCo
fonte

1

verifique este código diretamente do google. eles criaram um exemplo de filtragem code.google.com/apis/maps/documentation/javascript/…

— UnLoCo

O objeto de preenchimento automático não aceitará duas variáveis, apenas uma variável pode ser aceita como 'geocode'. Não sei como resolver esse problema. A documentação do Google lista muitos tipos, mas nenhum pode ser aceito.

— JohnTaa

os mesmos parâmetros funcionariam AutocompleteService?

— Steven Aguilar

12

tente isso

<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 snippet

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

Altere isso para: "region = in" (in = india)

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

— Ravindra
fonte

Precisamos lista de cidades, lista de estados, lista de áreas e assim por diante

— Shadab K

Essa deve ser a resposta aceita. A maneira mais simples e rápida de alcançar o resultado solicitado pelo OP. e funcionou para mim.

— user2056633

9

A resposta dada por François resulta na listagem de todas as cidades de um país. Mas se o requisito é listar todas as regiões (cidades + estados + outras regiões etc.) em um país ou nos estabelecimentos do país, é possível filtrar os resultados de acordo com a alteração de tipos.

Listar apenas cidades do país

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

Listar todas as cidades, estados e regiões do país

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

Liste todos os estabelecimentos - como restaurantes, lojas e escritórios no país

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

Mais informações e opções disponíveis em

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

Espero que isso possa ser útil para alguém

— Kiran Muralee
fonte

9

Basicamente, o mesmo que a resposta aceita, mas atualizado com novo tipo e restrições de vários 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 em '(regions)'vez de '(cities)'permite pesquisar por código postal e nome da cidade.

Consulte a documentação oficial, Tabela 3: https://developers.google.com/places/supported_types

— seBaka28
fonte

8

Venho brincando com a API de preenchimento automático do Google há um tempo e aqui está a melhor solução que encontrei para limitar seus resultados apenas a 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
    }
  }
}

Se você observar o objeto de resultado retornado, verá que há uma matriz address_components que conterá vários objetos que representam partes diferentes de um endereço. Dentro de cada um desses objetos, ele conterá uma matriz de 'tipos' e dentro dessa matriz de 'tipos', você verá os diferentes rótulos associados a um endereço, incluindo um para o país.

— wmock
fonte

Existe uma maneira de restringir apenas alguns estados nos EUA ou até excluir estados específicos?

— Martin Erlic

@santafebound Estou tentando fazer a mesma coisa (para um estado específico na Austrália). A partir da documentação, parece que a resposta é 'Não [ainda]', mas espero encontrar uma maneira de interceptar o responseobjeto e restringi-lo por outras chaves nos dados.

— GT.

4

Você também precisará ampliar e centralizar o mapa devido às restrições do seu país!

Basta usar os parâmetros de zoom e 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
fonte

4

Eu encontrei uma solução para mim

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 solução mostra apenas cidade e país ..

— Cenk YAGMUR
fonte

Você pode fornecer a lista de códigos completa com autocomplete

— 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 mais informações, visite este link

— Hina Vaja
fonte