2012-08-13 22 views
35

Der Versuch, Auto-Vervollständigen-Arbeits für meine Google-Maps-Anwendung zu bekommen.Google Maps v3 API - Auto Complete (Adresse)

Hier ist der aktuelle Code:

HTML

<input type="text" class="clearText" id="address" name="address" value="" size=20 autocomplete="off"> 

Javascript

var input = document.getElementById('address'); 
    var options = { 
     componentRestrictions: {country: 'au'} 
    }; 
    var autocomplete = new google.maps.places.Autocomplete(input, options); 

Leider passiert nichts, wenn eine Adresse eingeben.

Irgendwelche Ideen?

Vielen Dank im Voraus.

Edit: Ich bin die folgenden Fehler tatsächlich zu erhalten:

Uncaught Typeerror: kann Eigenschaft ‚Autovervollständigen‘ undefinierter

Nicht sicher lesen, warum der Code in meiner Karte initialisieren Funktion gesetzt wird.

Edit 2: Fest. Antwort unten.

+4

Ihre Fix Edition funktioniert gut! vielen Dank. – eifersucht

+0

Haben Sie nur dieses Skript geladen? ' – jshaf

Antwort

4

behoben. Die Autocomplete-Bibliothek ist eigentlich eine separate Bibliothek, die explizit geladen werden muss. Die folgende Zeile löste das Problem.

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places‌​&sensor=false"></scr‌​ipt> 
14

Ihr fix arbeitete auch für mich. Ich bin mit der Geocomplete jQuery-Plug-in http://ubilabs.github.com/geocomplete/ und die Anweisungen auf ihrer Homepage sagen diesen

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script> 

zu verwenden, aber es funktioniert nicht für mich arbeiten und wurde mit dem gleichen Fehler.

Siehe Dokumentation für Google Maps API hier https://developers.google.com/maps/documentation/javascript/places?hl=en-EN#loading_the_library

+0

Seltsam Interessant zu wissen, warum das passiert. Möglicherweise liegt das Problem daran, dass der Amperstatus an den Browser gesendet wird. Haben Sie PHP oder HTML zum Generieren des Skripts verwendet? Welcher Browser? –

+0

Dies war vor einer Weile, aber ich denke, ich habe eine Rails-Vorlage verwendet, um das Skript zu generieren. Also, HTML. –

+0

Das funktionierte nicht, da die URL 'sensor = false & libraries = places' sein sollte, nicht' sensor = false & libraries = places', was Sie hatten. '&' ist ein HTML-Zeichen und keine URL (weil in einer URL nur '&') :). – Maverick

0

Dank Matt für die Antwort! Irgendwie scheint es wichtig zu sein, das type="text/javascript" Attribut auf dem <script> Tag bei der Verwendung von libraries=places nicht wegzulassen.

funktioniert nicht:

<script src="http://maps.googleapis.com/maps/api/js?libaries=places&sensor=false&callback=initMap"></script> 
<script src="http://maps.googleapis.com/maps/api/js?libaries=places&sensor=false"></script> 

Works:

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

Callback-Variante funktioniert auch (mit initMap Funktion definiert):

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false&callback=initMap"></script> 

Diese mit einem anderen konsistent zu sein scheint SO answer und inkonsistent mit der official documentation (sofern nicht zur Verfügung gestellt die key in der URL macht den Unterschied).

1

Sie müssen hinzufügen 'verschieben async', um das Skript-Attribut, wie folgt aus: