angular2-google-maps otomatik tamamlama çalışmıyor

Question

Angular2-google-maps ile projeme otomatik tamamlama eklemeye çalışıyorum. Benim AppModule ve sonra benim bileşeninde otomatik tamamlama kodunu eklendi: ('yerleri' kütüphanelerle) Ben AgmCoreModule.forRoot ekleyin. Hala hata "tanımsız malı 'Otomatik Tamamlama' okunamıyor" olsun. Küresel var google değerini kontrol çalıştı ve google.map 'Yerler' alanını içermiyor. Ben angular2 için nispeten yeni, bu yüzden eksik olduğumu anlamak için biraz yardıma ihtiyacım var. Kodum, AppModule
'da 'angular2-google-maps/core' öğesinden {AgmCoreModule} içe aktarılıyor;

AppComponent yılında

@NgModule({ 
    bootstrap: [ App ], 
    declarations: [ 
     App, 
     ErrorComponent, 
    ], 
    imports: [ // import Angular's modules 
    AgmCoreModule.forRoot({ 
      apiKey: '[API_KEY_REDACTED]', 
      libraries: ["places"] 
     }), 
     BrowserModule, 

     FormsModule, 
     ReactiveFormsModule, 
     HttpModule, 
     TranslateModule.forRoot(), 
     RouterModule.forRoot(ROUTES, { useHash: true }) 
    ], 
    providers: [ // expose our Services and Providers into Angular's dependency injection 
     ENV_PROVIDERS, 
     APP_PROVIDERS, 
    ] 
}) 
export class AppModule { 

:

import {MapsAPILoader} from 'angular2-google-maps/core'; 
import { NgZone   } from '@angular/core'; 
declare var google: any; 
export class EventInfoTab { 
    @ViewChild('gmap') gmap:any; 
constructor(
     private _loader: MapsAPILoader, 
     private zone   : NgZone, 
) 
ngAfterViewInit(): void { 
     this._loader.load().then(() => { 
     let address = document.getElementById("location"); 
     console.log("google", google); 
      let autocomplete = new google.maps.places.Autocomplete(address, {}); 
      console.log ("autocomplete",autocomplete); 
      google.maps.event.addListener(autocomplete, 'place_changed',() => { 
     this.zone.run(() => { 
      console.log ("autocomplete place_changed",autocomplete); 
      var place = autocomplete.getPlace(); 
      this.lat = place.geometry.location.lat(); 
      this.lng = place.geometry.location.lng(); 
      //alert(JSON.stringify(place)); 
      this.markers[0] ={ 
          lat: this.lat, 
          lng: this.lng, 
          label: 'x', 
          draggable: false 
          }; 
       });       

       }); 
      });.... 

Answer 1

Yani, o iş yapmak başardı. Ben ana bileşenden yol verilmesinden sonra bir özellik bileşeninde Otomatik tamamlama ile haritayı dahil etmeye çalışıyordu. Ben uygulama module.ts kodu

'AgmCoreModule.forRoot({ 
      apiKey: '[API_KEY_REDACTED]', 
      libraries: ["places"] 
     }),' 

çıkarılıp özelliğin module.ts ithalatta eklemiş ve işe yaradı.

Pooja hers çalışma var, ve zaten onun için Angular2 + angular2-google-haritalar + Otomatik Tamamlama bir çalışma örnek kapamış yana

Answer 2

, ben gelecek geliştiriciler benzer bir şey arıyor yardımcı olmak için burada kod eklemek düşündüm .

import { 
    Component, 
    NgModule, 
    OnInit, 
    NgZone 
} from '@angular/core'; 

import { 
    BrowserModule 
} from '@angular/platform-browser'; 

import { 
    AgmCoreModule, 
    MapsAPILoader 
} from 'angular2-google-maps/core'; 

declare var google: any; 

@Component({ 
    selector: 'my-app', 
    styles: [` 
    .sebm-google-map-container { 
     height: 300px; 
    } 
    `], 
    template: ` 
    <sebm-google-map 
     [latitude]="lat" 
     [longitude]="lng" 
     [zoom]="zoom" 
     [disableDefaultUI]="false" 
     [zoomControl]="true"> 

     <sebm-google-map-marker 
      *ngFor="let m of markers; let i = index" 
      (markerClick)="clickedMarker(m.label, i)" 
      [latitude]="m.lat" 
      [longitude]="m.lng" 
      [label]="m.label" 
      [markerDraggable]="m.draggable" 
      (dragEnd)="markerDragEnd(m, $event)"> 

     <sebm-google-map-info-window> 
      <strong>InfoWindow content</strong> 
     </sebm-google-map-info-window> 

     </sebm-google-map-marker> 

    </sebm-google-map> 
    <input type="text" id="autocompleteInput"> 
`}) 
export class App implements OnInit { 

    constructor(
    private _loader: MapsAPILoader, 
    private _zone: NgZone) { 
    } 

    ngOnInit(): void { 
    this.autocomplete(); 
    } 

    autocomplete() { 
    this._loader.load().then(() => { 
     var autocomplete = new google.maps.places.Autocomplete(document.getElementById("autocompleteInput"), {}); 
     google.maps.event.addListener(autocomplete, 'place_changed',() => { 
      this._zone.run(() => { 
       var place = autocomplete.getPlace(); 

       this.markers.push({ 
       lat: place.geometry.location.lat(), 
        lng: place.geometry.location.lng(), 
        label: place.name, 
       }); 

       this.lat = place.geometry.location.lat(); 
       this.lng = place.geometry.location.lng(); 

       console.log(place); 
      }); 
     }); 
    }); 
    } 

    // google maps zoom level 
    zoom: number = 8; 

    // initial center position for the map 
    lat: number = 51.673858; 
    lng: number = 7.815982; 

    clickedMarker(label: string, index: number) { 
    console.log(`clicked the marker: ${label || index}`) 
    } 

    mapClicked($event: MouseEvent) { 
    this.markers.push({ 
     lat: $event.coords.lat, 
     lng: $event.coords.lng 
    }); 
    } 

    markerDragEnd(m: marker, $event: MouseEvent) { 
    console.log('dragEnd', m, $event); 
    } 

    markers: marker[] = []; 
} 
// just an interface for type safety. 
interface marker { 
    lat: number; 
    lng: number; 
    label?: string; 
    draggable: boolean; 
} 

@NgModule({ 
    imports: [ 
    BrowserModule, 
    AgmCoreModule.forRoot({ 
     libraries: ['places'] 
    }) 
    ], 
    declarations: [ App ], 
    bootstrap: [ App ] 
}) 
export class AppModule {} 

Working Plnkr

4/17/2017 GÜNCELLEME sürümü 1.0.0-beta.0 olarak

- yeşil-zebra, AGM takım adlandırma ile kopma değişiklik yayınlandı senin şablon dosyasına bir güncelleme gerektirecektir bileşenlerinin aşağıdaki gibi:

<agm-map 
    [latitude]="lat" 
    [longitude]="lng" 
    [zoom]="zoom" 
    [disableDefaultUI]="false" 
    [zoomControl]="true"> 

    <agm-marker 
     *ngFor="let m of markers; let i = index" 
     (markerClick)="clickedMarker(m.label, i)" 
     [latitude]="m.lat" 
     [longitude]="m.lng" 
     [label]="m.label" 
     [markerDraggable]="m.draggable" 
     (dragEnd)="markerDragEnd(m, $event)"> 

    <agm-info-window> 
     <strong>InfoWindow content</strong> 
    </agm-info-window> 

    </agm-marker> 

</agm-map> 
<input type="text" id="autocompleteInput"> 

Yukarıdaki plnkr/kodunun güncellenmiş bir sürümü aşağıdaki GitHub repo'da bulunabilir.