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.