Google Autocomplete
Implement a search bar with autocomplete functionality that matches places catalogued by Google
Autocomplete is used in various apps for finding locations on a map . E.g. We use autocomplete in Uber to find our destination, to find a place on Google Maps etc.
Ionic 5 Full App implements autocomplete using AGM - Angular google Maps.
Autocomplete in Ionic 5 Full App
Import the MapsAPILoader with
import { MapsAPILoader } from '@agm/core';
Autocomplete can be simply implemented using
const autocomplete = new google.maps.places.Autocomplete(nativeHomeInputBox, {
types: ['address']
});
autocomplete.addListener('place_changed', () => {
this.ngZone.run(() => {
const place: google.maps.places.PlaceResult = autocomplete.getPlace();
this.query = place['formatted_address'];
});
});
Once a place is selected from the list, place variable in the above function return a response as shown below. You can choose formatted_address for all general purposes.
Copy link