각진 Google지도 장소 자동 완성이 모든 장소를 표시하지 않습니다.

Question

최종 사용자가 바닐라 자바 ​​스크립트로 검색 할 수 있도록 Google지도 위치 표시기를 통합하고 싶습니다.이 기능을 통합했으며 예상대로 작동하지만 이제 시도하고 있습니다. 각도 4 프로젝트로 변환 내 Google지도 placeholder 그냥 날 선택된 장소를 보여주는 사실을 제외하고 모든게 잘 작동합니다. 이 코드를 사용하고 있기 때문에 plunkr으로 간주 할 수 있습니다. 또한 Angular Google Map 모듈을 사용하고 있습니다. 이 API 또는 대안에 대한 대안을 제안 하시겠습니까?
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 파일

<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

내가 nativeElement에서 "주소"를 제거하고 그것은 나를 위해 일한 : 나는 아래에있는 내 코드를 삽입했습니다. 예 : 다음으로 바꾸기 :

자동 완성 = new google.maps.places.Autocomplete (this.searchElement.NativeElement, {});

Answer 2

유형 매개 변수에서 "주소"를 전달했기 때문에 주소 만 검색됩니다. 더 많은 정보를 들어

은 다음 링크로 이동 : https://developers.google.com/places/web-service/autocomplete#place_types

그냥 유형을 제거하고 당신은 검색에있는 모든 장소를 얻을 것이다.

자동 완성 = new google.maps.places.Autocomplete (this.searchElementRef.nativeElement);