web-dev-qa-db-fra.com

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

J'utilise google autocomplete places javascript pour renvoyer les résultats suggérés pour ma zone de recherche. Ce dont j'ai besoin, c'est de ne montrer que la ville et le pays en relation avec les caractères saisis. limiter le résultat pour 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>
javascriptautocompletegoogle-maps-api-3
185
JohnTaa
<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>
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

22
UnLoCo

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>

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

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

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

9
Ravindra

Le réponse donné par François a pour résultat de lister toutes les villes d'un pays. Mais s'il est nécessaire de répertorier toutes les régions (villes + États + autres régions, etc.) d'un pays ou de ses établissements, vous pouvez filtrer les résultats en conséquence en modifiant les types.

N'indiquer que les villes du pays 

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

Lister toutes les villes, états et régions du pays 

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

Répertoriez tous les établissements - tels que restaurants, magasins et bureaux dans le pays 

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

Plus d'informations et d'options disponibles à l'adresse

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

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

8
Kiran Muralee

Cela fait un moment que je joue avec l'API Google Autocomplete et voici la meilleure solution que je puisse trouver pour limiter vos résultats à certains 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 de résultat qui est 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, vous verrez les différentes étiquettes associées à une adresse, y compris une pour pays.

7
wmock

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

6
seBaka28

Aussi, vous devrez zoomer et centrer la carte en raison des restrictions de votre pays!

Il suffit d'utiliser les paramètres de zoom et de centrage! ;)

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

  ... all other code ...

}
4
Kir Mazur

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

3
Cenk YAGMUR
<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

2
Hina Vaja