Angular Google Maps Orte Autocomplete nicht alle Orte anzeigen

Question

Ich möchte Google Maps Platzhalter integrieren, so dass der Endbenutzer für seine/ihre Orte suchen kann, aber in Vanille Javascript habe ich dies integriert und funktioniert wie erwartet und jetzt versuche ich es Konvertieren Sie es in Angular 4 Projekt alles funktioniert gut, außer für die Tatsache, dass meine Google Maps Platzhalter zeigt mir nur ausgewählte Orte. Sie können dies plunkr betrachten, weil ich diesen Code auch verwende. Weiter benutze ich das Angular Google Map Modul. Bitte schlagen Sie eine Alternative zu dieser API oder einer anderen Arbeit vor? Ich habe meinen Code unten eingebettet:
TS FILE

import {AfterViewInit, Component, ElementRef, NgZone, OnInit, ViewChild} from '@angular/core'; 
import {FormControl} from "@angular/forms"; 
import {MapsAPILoader} from "@agm/core"; 
declare var google: any; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent implements AfterViewInit, OnInit { 
    constructor(
    private mapsAPILoader: MapsAPILoader, 
    private ngZone: NgZone 
) {} 
    title = 'app'; 
    // google maps zoom level 
    zoom: number = 8; 
    // initial center position for the map 
    lat: number = 51.673858; 
    lng: number = 7.815982; 
    markers: marker[] = [ 
    { 
     lat: 51.673858, 
     lng: 7.815982, 
     label: 'A', 
     draggable: true 
    }, 
    { 
     lat: 51.373858, 
     lng: 7.215982, 
     label: 'B', 
     draggable: false 
    }, 
    { 
     lat: 51.723858, 
     lng: 7.895982, 
     label: 'C', 
     draggable: true 
    } 
    ]; 

    public latitude: number; 
    public longitude: number; 
    public searchControl: FormControl; 
    @ViewChild('search') 
    public searchElementRef: ElementRef; 

    ngOnInit() { 
    this.zoom = 4; 
    this.latitude = 39.8282; 
    this.longitude = -98.5795; 

    //create search FormControl 
    this.searchControl = new FormControl(); 

    //set current position 
    this.setCurrentPosition(); 

    //load Places Autocomplete 
    this.mapsAPILoader.load().then(() => { 
     let autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, { 
     types: ["address"] 
     }); 
     autocomplete.addListener("place_changed",() => { 
     this.ngZone.run(() => { 
      //get the place result 
      let place: google.maps.places.PlaceResult = autocomplete.getPlace(); 

      //verify result 
      if (place.geometry === undefined || place.geometry === null) { 
      return; 
      } 

      //set latitude, longitude and zoom 
      this.latitude = place.geometry.location.lat(); 
      this.longitude = place.geometry.location.lng(); 
      this.zoom = 12; 
     }); 
     }); 
    }); 
    } 

    private setCurrentPosition() { 
    if ("geolocation" in navigator) { 
     navigator.geolocation.getCurrentPosition((position) => { 
     this.latitude = position.coords.latitude; 
     this.longitude = position.coords.longitude; 
     this.zoom = 12; 
     }); 
    } 
    } 

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

    mapClicked($event: any) { 
    // console.log($event); 
    this.markers.push({ 
     lat: $event.coords.lat, 
     lng: $event.coords.lng, 
     label: 'A', 
     draggable: true 
    }); 
    } 


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

    ngAfterViewInit() { 
    this.mapsAPILoader.load().then(() => { 
     let autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, { 
     types: ["address"] 
     }); 
     autocomplete.addListener("place_changed",() => { 
     this.ngZone.run(() => { 
      //get the place result 
      let place: google.maps.places.PlaceResult = autocomplete.getPlace(); 

      //verify result 
      if (place.geometry === undefined || place.geometry === null) { 
      return; 
      } 

      //set latitude, longitude and zoom 
      this.latitude = place.geometry.location.lat(); 
      this.longitude = place.geometry.location.lng(); 
      this.zoom = 12; 
     }); 
     }); 
    }); 
    } 



} 

interface marker { 
    lat: number; 
    lng: number; 
    label?: string; 
    draggable: boolean; 
} 

HTML Datei

<div class="container"> 
    <h1>Angular 2 + Google Maps Places Autocomplete</h1> 
    <div class="form-group"> 
    <input placeholder="search for location" autocorrect="off" 
      autocapitalize="off" spellcheck="off" type="text" class="form-control" #search > 
    </div> 
    <agm-map 
    (mapClick)="mapClicked($event)" 
    [latitude]="latitude" [longitude]="longitude" 
    [scrollwheel]="false" [zoom]="zoom"> 
    <agm-marker [latitude]="latitude" [longitude]="longitude"></agm-marker> 
    <agm-marker 
    *ngFor="let marker of markers" 
    [latitude]="marker.lat" 
    [longitude]="marker.lng" 
    ></agm-marker> 
    </agm-map> 
</div> 

Answer 1

I "Adresse" von nativeElement entfernt und es funktionierte für mich. d. H. Ersetzen durch:

Lassen Sie Autocomplete = neu google.maps.places.Autocomplete (this.searchElement.nativeElement, {});

Answer 2

Weil in types-Parameter haben Sie "Adresse" .So nur Adressen werden durchsucht.

Für weitere Informationen gehen Sie zu folgendem Link: https://developers.google.com/places/web-service/autocomplete#place_types

Gerade Arten entfernen, und Sie werden alle Orte auf der Suche bekommen.

Lassen Sie Autocomplete = neu google.maps.places.Autocomplete (this.searchElementRef.nativeElement);