So beschränken Sie die Ergebnisse der automatischen Vervollständigung von Google nur auf Stadt und Land

198

Ich verwende Javascript für die automatische Vervollständigung von Orten in Google, um die vorgeschlagenen Ergebnisse für mein Suchfeld zurückzugeben. Ich muss nur die Stadt und das Land in Bezug auf die eingegebenen Zeichen anzeigen, aber Google API liefert viele allgemeine Ergebnisse für Orte, die ich nicht benötige um das Ergebnis so zu begrenzen, dass nur Stadt und Land angezeigt werden.

Ich verwende das folgende Beispiel:

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

Antworten:

372

Sie können die Länderbeschränkung ausprobieren

function initialize() {

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

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

Mehr Info:

ISO 3166-1 alpha-2 kann verwendet werden, um die Ergebnisse auf bestimmte Gruppen zu beschränken. Derzeit können Sie componentRestrictions verwenden, um nach Ländern zu filtern.

Das Land muss als zweistelliger, ISO 3166-1 Alpha-2-kompatibler Ländercode übergeben werden.

Offiziell zugewiesene Ländercodes

Francois
quelle
Wissen Sie, ob es Verwendungsbeschränkungen für automatische Vervollständigungsabfragen gibt, wenn ich keine Karten lade? Ich weiß, dass es ein Nutzungslimit von 25.000 gibt, wenn ich Karten
lade
4
Es ist August 2014. Ist es bereits möglich, nur Länder und Städte anzuzeigen? Wenn ich beispielsweise Mil tippe, ist das Ergebnis Milan, Bergamo, Italien. Ich brauche nur Mailand, Italien. Das Hinzufügen aller Länder nacheinander ist keine Option.
Erdomester
2
Ist es möglich, mehr als ein Land anzugeben?
Bart
2
@bart anscheinend ist es nicht möglich. Bitte markieren Sie dieses Problem, wenn Sie diese Funktion wünschen.
dlsso
1
Wenn wir Typen verwenden: ['(Städte)'], können wir hier nicht nach Postleitzahl suchen.
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>
Erweitern Sie das Snippet

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

Verweis auf andere Typen: http://code.google.com/apis/maps/documentation/places/supported_types.html#table2

UnLoCo
quelle
1
Überprüfen Sie diesen Code direkt von Google. Sie machten ein Filterbeispiel code.google.com/apis/maps/documentation/javascript/…
UnLoCo
Das Autocomplete-Objekt akzeptiert keine zwei Variablen. Es kann nur eine Variable akzeptiert werden, nämlich 'Geocode'. Ich weiß nicht, wie ich dieses Problem lösen soll. In der Google-Dokumentation sind viele Typen aufgeführt, aber keine können akzeptiert werden.
JohnTaa
Würden die gleichen Parameter für funktionieren AutocompleteService?
Steven Aguilar
12

Versuche dies 

<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>
Erweitern Sie das Snippet

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

Ändern Sie dies in: "region = in" (in = indien)

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

Ravindra
quelle
Wir brauchen eine Liste der Städte, eine Liste der Bundesstaaten, eine Liste der Gebiete und so weiter
Shadab K
Dies sollte die akzeptierte Antwort sein. Der einfachste und schnellste Weg, um das Ergebnis zu erzielen, das das OP verlangt. und es hat bei mir funktioniert.
user2056633
9

Die Antwort von Francois führt dazu, dass alle Städte eines Landes aufgelistet werden. Wenn jedoch alle Regionen (Städte + Bundesstaaten + andere Regionen usw.) in einem Land oder die Einrichtungen im Land aufgelistet werden müssen, können Sie die Ergebnisse entsprechend filtern, indem Sie die Typen ändern.

Listen Sie nur Städte im Land auf 

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

Listen Sie alle Städte, Bundesstaaten und Regionen des Landes auf

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

Listen Sie alle Einrichtungen auf, z. B. Restaurants, Geschäfte und Büros im Land

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

Weitere Informationen und Optionen finden Sie unter

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

Hoffe, dass dies für jemanden nützlich sein könnte

Kiran Muralee
quelle
9

Grundsätzlich identisch mit der akzeptierten Antwort, jedoch mit neuem Typ und Einschränkungen für mehrere Länder aktualisiert:

function initialize() {

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

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

Die Verwendung von '(regions)'anstelle von '(cities)'ermöglicht die Suche nach Postleitzahl und Städtenamen.

Siehe offizielle Dokumentation, Tabelle 3: https://developers.google.com/places/supported_types

seBaka28
quelle
8

Ich habe ein bisschen mit der Google Autocomplete-API herumgespielt und hier ist die beste Lösung, die ich finden konnte, um Ihre Ergebnisse auf nur Länder zu beschränken:

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

Wenn Sie sich das zurückgegebene Ergebnisobjekt ansehen, werden Sie feststellen, dass es ein address_components-Array gibt, das mehrere Objekte enthält, die verschiedene Teile einer Adresse darstellen. In jedem dieser Objekte befindet sich ein Array "types". In diesem Array "types" werden die verschiedenen Bezeichnungen angezeigt, die einer Adresse zugeordnet sind, einschließlich einer für das Land.

wmock
quelle
Gibt es eine Möglichkeit, sich nur auf bestimmte Staaten in den USA zu beschränken oder sogar bestimmte Staaten auszuschließen?
Martin Erlic
@santafebound Ich versuche das Gleiche zu tun (für einen bestimmten Staat in Australien). Aus der Dokumentation geht hervor, dass die Antwort "Nein [noch nicht]" lautet, aber ich hoffe, einen Weg zu finden, das responseObjekt abzufangen und durch andere Schlüssel in den Daten einzuschränken.
GT.
4

Außerdem müssen Sie die Karte aufgrund Ihrer Länderbeschränkungen zoomen und zentrieren!

Verwenden Sie einfach die Zoom- und Center-Parameter! ;)

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

Ich habe eine Lösung für mich gefunden

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

Diese Lösung zeigt nur Stadt und Land.

Cenk YAGMUR
quelle
Können Sie die vollständige Codeliste mit 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>

Weitere Informationen finden Sie unter diesem Link

Hina Vaja
quelle