Google Places Autocomplete + Angular2

Baue ich eine einfache Google Places Autocomplete Angular2 Richtlinie, aber das problem ist, dass nicht die Vorhersage (die Antwort ist immer leer?!)...

Als proof-of-concept habe ich die einfachste mögliche code-snippet als Referenz:

<!DOCTYPE html>
<html>

<head>
    <script src="https://maps.googleapis.com/maps/api/js?key=[MY_API_KEY]&libraries=places" async defer></script>
</head>

<body>
    <button type="button" onclick="go()">go</button>
    <input id="autocomplete" type="text"></input>
    <script>
    var autocomplete = null;

    function go() {
        autocomplete = new google.maps.places.Autocomplete(
            (document.getElementById('autocomplete')), {
                types: ['geocode']
            });
    }
    </script>
</body>

</html>

Der obige code funktioniert - ich kann Vorhersagen nach dem Klick auf " Go " button.

Nun, Angular2 Szenario:

Meiner _Layout.cshtml-Datei hat das folgende tag in den head-Abschnitt:

<script src="https://maps.googleapis.com/maps/api/js?key=[MY_API_KEY]&libraries=places" async defer></script>

Meine Richtlinie:

import {- Richtlinie, ElementRef, Input } von '@eckig/Kern'; 

deklarieren Sie var google: jede; 

@- Direktive({ selector: '[googleplaces]' }) 
export-Klasse GooglePlacesDirective { 

AutoVervollständigen: alle; 

Konstruktor(private-el: ElementRef) { 

} 

ngAfterContentInit() { 
diese.autocomplete = new google.maps.Orte.AutoVervollständigen - ( 
(dies.el.nativeElement), 
{ Typen: ['geocode', 'Städte'] }); 
} 
} 

Und einfache Winkel-Komponente:

<form [formGroup]="companyForm">

    .
    .
    .

    <div class="form-group">
        <label for="Location">Location</label>
        <input type="text" 
               class="form-control" 
               id="Location" 
               fromControlName="Location" 
               googleplaces>
    </div>
</form>

Szenario 2 (eckig) nicht funktioniert. Die Fakten:

  • AutoVervollständigen initialisiert wird (es hat alle erwarteten Eigenschaften/Methoden, wird der Platzhalter "Geben Sie eine Position an", etc...)
  • AutoVervollständigen nicht wieder die Vorhersage für eingegebene such-string benutzen (es gibt nur "/**/xdc._le3zv3 && xdc._le3zv3( [4] )")

Auch die Google API-Konsole sagt, dass alles ist wie es sein sollte?! Hier ist der screenshot:

geben Sie eine Bild-Beschreibung hier

Was hier in Frage? Danke...

InformationsquelleAutor stedejan | 2017-02-20
Schreibe einen Kommentar