Comment limiter les résultats de la saisie semi-automatique de Google à la ville et au pays uniquement

198

J'utilise google autocomplete places javascript pour renvoyer les résultats suggérés pour ma boîte de recherche, ce dont j'ai besoin est de n'afficher que la ville et le pays liés aux caractères saisis mais google api donnera beaucoup de résultats de lieux généraux dont je n'ai pas besoin, alors comment pour limiter le résultat afin d'afficher uniquement la ville et le pays.

J'utilise l'exemple suivant:

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

Réponses:

372

Vous pouvez essayer la restriction du pays

function initialize() {

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

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

Plus d'informations:

ISO 3166-1 alpha-2 peut être utilisée pour restreindre les résultats à des groupes spécifiques. Actuellement, vous pouvez utiliser componentRestrictions pour filtrer par pays.

Le pays doit être transmis sous la forme d'un code de pays compatible ISO 3166-1 Alpha-2 à deux caractères.

Indicatifs de pays officiellement attribués

François
la source
Savez-vous s'il existe une limite d'utilisation pour les requêtes de saisie automatique si je ne charge aucune carte? Je sais qu'il y a une limite d'utilisation de 25 000 si je charge des cartes
Mithil
4
Nous sommes en août 2014. Est-il déjà possible d'afficher uniquement les pays et les villes? Par exemple, lorsque je tape Mil, le résultat est Milan, Bergame, Italie. Je n'ai besoin que de Milan, en Italie. Ajouter tous les pays un par un n'est pas une option.
erdomester
2
Est-il possible de spécifier plus d'un pays?
bart
2
@bart apparemment ce n'est pas possible. Veuillez lancer ce problème si vous souhaitez cette fonctionnalité.
dlsso
1
si nous utilisons des types: ['(villes)'], cela ne nous permettra pas de rechercher par code postal ici.
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>
Développer l'extrait

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

référence à d'autres types: http://code.google.com/apis/maps/documentation/places/supported_types.html#table2

UnLoCo
la source
1
vérifiez ce code directement sur google. ils ont fait un exemple de filtrage code.google.com/apis/maps/documentation/javascript/…
UnLoCo
l'objet de saisie semi-automatique n'acceptera pas deux variables, une seule variable peut être acceptée qui est «géocode». Je ne sais pas comment résoudre ce problème. La documentation de Google répertorie beaucoup de types mais aucun ne peut être accepté.
JohnTaa
les mêmes paramètres fonctionneraient-ils AutocompleteService?
Steven Aguilar
12

essaye ça 

<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>
Développer l'extrait

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

Changez ceci en: "region = in" (in = india)

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

Ravindra
la source
Nous avons besoin d'une liste de villes, d'une liste d'États, d'une liste de régions, etc.
Shadab K
Cela devrait être la réponse acceptée. Le moyen le plus simple et le plus rapide pour obtenir le résultat demandé par l'OP. et cela a fonctionné pour moi.
user2056633
9

La réponse donnée par François aboutit à répertorier toutes les villes d'un pays. Mais si l'exigence est de répertorier toutes les régions (villes + états + autres régions, etc.) d'un pays ou les établissements du pays, vous pouvez filtrer les résultats en conséquence en changeant de type.

Liste uniquement les villes du pays 

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

Liste de toutes les villes, états et régions du pays

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

Liste de tous les établissements - tels que les restaurants, les magasins et les bureaux dans le pays

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

Plus d'informations et d'options disponibles sur

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

J'espère que cela pourrait être utile à quelqu'un

Kiran Muralee
la source
9

Fondamentalement identique à la réponse acceptée, mais mis à jour avec un nouveau type et plusieurs restrictions de pays:

function initialize() {

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

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

Utiliser '(regions)'au lieu de '(cities)'permet de rechercher par code postal ainsi que par nom de ville.

Voir la documentation officielle, tableau 3: https://developers.google.com/places/supported_types

seBaka28
la source
8

Je joue avec l'API Google Autocomplete depuis un moment et voici la meilleure solution que j'ai pu trouver pour limiter vos résultats aux seuls pays:

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 vous regardez l'objet résultat renvoyé, vous verrez qu'il existe un tableau address_components qui contiendra plusieurs objets représentant différentes parties d'une adresse. Dans chacun de ces objets, il contiendra un tableau «types» et dans ce tableau «types», vous verrez les différentes étiquettes associées à une adresse, dont une pour le pays.

wmock
la source
Existe-t-il un moyen de restreindre à certains États des États-Unis uniquement, voire d'exclure certains États?
Martin Erlic
@santafebound J'essaye de faire la même chose (pour un état spécifique en Australie). D'après la documentation, il semble que la réponse est «Non [t encore]», mais j'espère trouver un moyen d'intercepter l' responseobjet et de le restreindre par d'autres clés dans les données.
GT.
4

Vous devrez également zoomer et centrer la carte en raison des restrictions de votre pays!

Utilisez simplement les paramètres de zoom et de centre! ;)

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
la source
4

J'ai trouvé une solution pour moi

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

cette solution ne montre que la ville et le pays ..

Cenk YAGMUR
la source
Pouvez-vous fournir la liste complète des codes avec la saisie semi
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>

Pour plus d'informations, visitez ce lien

Hina Vaja
la source