---
description: >-
  Implement a search bar with autocomplete functionality that matches places
  catalogued by Google
---

# Google Autocomplete

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.&#x20;

Capacitor Full App implements autocomplete using AGM - Angular google Maps.

![](https://3608702775-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LsQWILyBp_9nWmIJ7TG%2F-LucCQHpOu9gXmnAyReO%2F-LucCj9lWQ_TVe3qiAZn%2Fassets_-La-kqVz2Uq1Ka0VUWZT_-LbHEXqFFNTtrqNzab_H_-LbHHLXRsH0C1a1vethA_Screen%20Shot%202019-03-31%20at%2011.10.34%20AM.png?alt=media\&token=073bb0b8-8783-42fe-aafa-ce0db119733d)

Import the `MapsAPILoader`  with&#x20;

```
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.&#x20;

![](https://3608702775-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LsQWILyBp_9nWmIJ7TG%2F-LucCQHpOu9gXmnAyReO%2F-LucCn4lMzEdSQVpINNj%2Fassets_-La-kqVz2Uq1Ka0VUWZT_-LbHEXqFFNTtrqNzab_H_-LbHHArAtEZFVY_zt_VF_Screen%20Shot%202019-03-31%20at%2011.12.44%20AM.png?alt=media\&token=20b4319a-46fd-4aa0-a5e7-fb469764c949)
