Angular 9 Google Maps Api Place Autocomplete

I have a Angular 9 (just migrated from 8), I need to use the Google Places API (I have a API key) for a Address Autocomplete, I can show the map with the @angular/googlemaps librar

Solution 1:

Angular should be able to use the googlemaps apis directly without too much of an issue.

The below code is using @agm/core for the map, however the autocomplete is just using the basic google maps api. If you still have issues, it maybe worth trying some of the following:

• Explicitly setting the google maps version.
• Making sure the places library is included
• Making sure the css it set correctly, sometimes the autocomplete ends up being hidden if a z-index and position isn't set.

component.html

<divclass="map-container"><agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom"><agm-marker [latitude]="lat" [longitude]="lng"></agm-marker></agm-map></div><divid="pac-container"><input #searchid="pac-input"type="text"placeholder="Enter a location"></div>

component.ts

import { Component, OnInit, ElementRef, ViewChild, NgZone } from'@angular/core';
import { MapsAPILoader } from'@agm/core';

@Component({
  selector: 'app-map',
  templateUrl: './component.html',
  styleUrls: ['./component.css']
})
exportclassMapComponentimplementsOnInit {

  lat: string;
  lng: string;
  zoom = 1;
  private geoCoder;

  @ViewChild('search')
  publicsearchElementRef: ElementRef;

  constructor(private mapsAPILoader: MapsAPILoader,
    private ngZone: NgZone) { }

  ngOnInit() {
    //load Places Autocompletethis.mapsAPILoader.load().then(() => { 
      this.geoCoder = new google.maps.Geocoder;

      const autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement);
      autocomplete.addListener("place_changed", () => {
        this.ngZone.run(() => {
          //get the place resultconstplace: google.maps.places.PlaceResult = autocomplete.getPlace();

          //verify resultif (place.geometry === undefined || place.geometry === null) {
            return;
          }

          //set latitude, longitude and zoomthis.lat = place.geometry.location.lat();
          this.lng = place.geometry.location.lng();
          this.zoom = 12;
        }); 
      });
    });
  }
}

component.css

.map-container {
  bottom: 0px;
  top: 0px;
  left: 0px;
  position: absolute;
  right: 0px;
}

agm-map {
  height: 100%;
  width: 100%;
}

#pac-container {
  padding-bottom: 12px;
  margin-right: 12px;
  z-index: 5000; /* not setting this can lead to angular hiding the autocomplete */position: absolute; /* not setting this can lead to angular hiding the autocomplete */
}

Your app module will need to import the @agm/core properly.

AgmCoreModule.forRoot({
  apiKey: 'yourapikey',
  libraries: ["places"],
  apiVersion: 'quarterly'
}),

Solution 2:

You may use this library instead https://github.com/angular-material-extensions/google-maps-autocomplete.

Solution 3:

I have released a small angular directive for angular 8+ (tested) applications. It wraps google place API programmatically to provide complete integration if you don't want to use the default dropdown provided by google. It also handle "Enter" key to select first result of dropdown automatically.

You can check it out here for demo : https://github.com/vlafranca/ngxAutocomPlace And npm here for install : https://www.npmjs.com/package/ngx-autocom-place