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

<div class="map-container">
  <agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
    <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
  </agm-map>
</div>

<div id="pac-container">
  <input #search id="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']
})
export class MapComponent implements OnInit {

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

  @ViewChild('search')
  public searchElementRef: ElementRef;

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

  ngOnInit() {
    //load Places Autocomplete
    this.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 result
          const place: google.maps.places.PlaceResult = autocomplete.getPlace();

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

          //set latitude, longitude and zoom
          this.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