Save google Autocomplete from input


#1

If I type in Atl then GooglePlace autocomplete shows a list of matching results which I can select for the input field. The problem is I’m not sure where this is captured in order to store it in the backend. If I console.log(“location”) then it only gives me the text I actually entered. So even if I select the entire name Atlanta, Ga after typing “Atl” the location only captures “ATL”.

     <input [(ngModel)]="location" id="places" type="text" name="search" placeholder="Enter city" #search>
ngOnInit(){
    this.mapsApiLoader.load().then(
  () => {
    let autocomplete = new google.maps.places.Autocomplete(this.searchElement.nativeElement, {types:['(cities)']});

    autocomplete.addListener("place_changed", () => {
      this.ngZone.run(() => {
        let place: google.maps.places.PlaceResult = autocomplete.getPlace();

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

How do I save the full city name instead of only the text I entered? I want the text I choose from the dropdown to be saved to my Firebase backend.


#2

add this line after if in ngZone.run

autocomplete.addListener("place_changed", () => {
      this.ngZone.run(() => {
        let place: google.maps.places.PlaceResult = autocomplete.getPlace();

        if(place.geometry === undefined || place.geometry === null){
          return;
        }
        this.location = place.formatted_address;
      });
    });

#3

Thanks so much. That worked.