Come limitare i risultati del completamento automatico di Google a Città e Paese

198

Sto usando javascript dei luoghi con completamento automatico di Google per restituire i risultati suggeriti per la mia casella di ricerca, ciò di cui ho bisogno è mostrare solo la città e il paese relativi ai caratteri inseriti, ma google api fornirà molti risultati di luoghi generali che non mi servono, quindi come per limitare il risultato per mostrare solo la città e il paese.

Sto usando il seguente esempio:

<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

Puoi provare la restrizione del Paese

function initialize() {

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

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

Ulteriori informazioni:

ISO 3166-1 alpha-2 può essere utilizzato per limitare i risultati a gruppi specifici. Attualmente, puoi utilizzare le restrizioni componente per filtrare per Paese.

Il paese deve essere passato come un codice paese compatibile con ISO 3166-1 Alpha-2 a due caratteri.

Codici paese assegnati ufficialmente

— Francois
fonte

Sai se ci sono limiti di utilizzo per le query di completamento automatico se non sto caricando alcuna mappa? So che c'è un limite di utilizzo di 25.000 se carico mappe

— Mithil

4

È agosto 2014. È già possibile mostrare solo paesi e città? Ad esempio, quando digito Mil, il risultato è Milano, Bergamo, Italia. Ho solo bisogno di Milano, Italia. L'aggiunta di tutti i paesi uno per uno non è un'opzione.

— Erdomester,

2

È possibile specificare più di un paese?

— Bart

2

@bart apparentemente non è possibile. Per favore contrassegna questo problema se desideri quella funzione.

— dlsso,

1

se utilizziamo tipi: ['(città)'], non ci consentirà di effettuare la ricerca per codice postale qui.

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

Espandi frammento

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

riferimento ad altri tipi: http://code.google.com/apis/maps/documentation/places/supported_types.html#table2

— Unloco
fonte

1

controlla questo codice direttamente da google. hanno fatto un esempio di filtro code.google.com/apis/maps/documentation/javascript/…

— UnLoCo

l'oggetto di completamento automatico non accetterà due variabili, solo una variabile può essere accettata che è 'geocode'. Non so come risolvere questo problema. La documentazione di Google elenca molti tipi, ma nessuno può essere accettato.

— JohnTaa,

funzionerebbero gli stessi parametri AutocompleteService?

— Steven Aguilar,

12

prova questo

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

Espandi frammento

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

Cambia questo in: "region = in" (in = india)

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

— Ravindra
fonte

Abbiamo bisogno di un elenco di città, un elenco di stati, un elenco di aree e così via

— Shadab K

Questa dovrebbe essere la risposta accettata. Il modo più semplice e veloce per ottenere il risultato richiesto dall'OP. e ha funzionato per me.

— user2056633

9

La risposta data da Francois si traduce in un elenco di tutte le città di un paese. Ma se il requisito è elencare tutte le regioni (città + stati + altre regioni ecc.) In un paese o gli stabilimenti nel paese, è possibile filtrare i risultati di conseguenza cambiando tipo.

Elencare solo le città del paese

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

Elenca tutte le città, gli stati e le regioni del paese

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

Elencare tutti gli stabilimenti, ad esempio ristoranti, negozi e uffici nel paese

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

Maggiori informazioni e opzioni disponibili su

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

Spero che questo possa essere utile a qualcuno

— Kiran Muralee
fonte

9

Sostanzialmente uguale alla risposta accettata, ma aggiornato con nuovo tipo e restrizioni per più paesi:

function initialize() {

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

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

L'utilizzo '(regions)'anziché '(cities)'consente di cercare per codice postale e nome della città.

Consulta la documentazione ufficiale, Tabella 3: https://developers.google.com/places/supported_types

— seBaka28
fonte

8

Ho giocato con l'API di completamento automatico di Google per un po 'ed ecco la migliore soluzione che ho trovato per limitare i tuoi risultati a soli paesi:

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 guardi l'oggetto risultato che viene restituito, noterai che esiste un array address_components che conterrà diversi oggetti che rappresentano diverse parti di un indirizzo. All'interno di ciascuno di questi oggetti, conterrà un array di "tipi" e all'interno di questo array di "tipi", vedrai le diverse etichette associate a un indirizzo, incluso uno per paese.

— wmock
fonte

Esiste un modo per limitare solo a determinati stati negli Stati Uniti o addirittura escludere stati particolari?

— Martin Erlic,

@santafebound Sto cercando di fare la stessa cosa (per uno stato specifico in Australia). Dalla documentazione sembra che la risposta sia "No [t ancora]", ma spero di trovare un modo per intercettare l' responseoggetto e limitarlo con altre chiavi nei dati.

— GT.

4

Inoltre dovrai ingrandire e centrare la mappa a causa delle restrizioni del tuo paese!

Usa solo i parametri di 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

Ho trovato una soluzione per me stesso

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);
            }
        }
    });
});

questa soluzione mostra solo città e paesi ..

— Cenk YAGMUR
fonte

Puoi fornire l'elenco completo dei codici con il completamento automatico

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

Per maggiori informazioni visita questo link

— Hina Vaja
fonte