feat(@angular/google-maps): Autocomplete address

[anuj9196]

Feature Description

Feature to add autocomplete input search field as

Use Case

Useful for searching for the places.

[mmalerba]

Hi, can you clarify what you're asking for? We do have an autocomplete component that can be hooked up to any input element: https://material.angular.io/components/autocomplete/overview

[maxailloud]

I think he means a google maps autocompleted field not just an autocomplete one.
I have the same need, to be able to use the google.maps.places.Autocomplete API to autocomplete address.

[andreialecu]

Here's an example of what would be needed here: https://www.npmjs.com/package/@angular-material-extensions/google-maps-autocomplete

That package is unfortunately not that well maintained.

[chakrachi]

yes please, I too am looking for such an amazing update to google-maps component.

Being able to use the places library API with autocompletion in modern angular app

[anuj9196]

Sad to see there is no update since it was reported 2 years back.

However, I'm trying to add auto-complete in my new Angular 18 project and have added this to the index.html

<script>
    (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
      v: "weekly",
      key: 'API_KEY'
    });
</script>

When using it like this in the component

<input type="text" class="form-control" #mapInput placeholder="Enter an address" i18n-placeholder>

@ViewChild('mapInput', {static: false}) mapInput: ElementRef;

const input = this.mapInput.nativeElement as HTMLInputElement;
const autocomplete = new google.maps.places.Autocomplete(input);

It is giving error in the browser console

ERROR:  TypeError: Cannot read properties of undefined (reading 'Autocomplete')

@mmalerba

[lynxeyedua]

@anuj9196 To use Autocomplete, you have to import it first:

1. Load the Maps JavaScript API by adding the inline bootstrap loader:

<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
  });
</script>

2. Load "places" library at runtime and use it after that:

@ViewChild('search') searchElementRef: ElementRef;

ngAfterViewInit() {
  this.initGooglePlaces()
}

async initGooglePlaces() {
  // init google map search place
  await google.maps.importLibrary('places'); //  <-- important place

  const autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement);

  autocomplete.addListener('place_changed', () => {
    const place = autocomplete.getPlace();

    console.log(place);
  });
});