Angular2 GoogleMapAPI AutoComplete Error Cannot read property 'Autocomplete'

Question

I want to use GoogleMapAPI auto-complete in angularjs2 and onsenUI2, but I can't do that.

This is my code:

import { Component, NgModule, OnInit, ViewChild, ElementRef } from '@angular/core';
import { FormControl, FormsModule, ReactiveFormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { AgmCoreModule, MapsAPILoader } from 'angular2-google-maps/core';
// import {GoogleplaceDirective} from '../googleplace.directive';
import {NgModel} from '@angular/forms';

@Component({
 selector: 'app-root',
 styles: [`
   .sebm-google-map-container {
   height: 300px;
 }
 `],
 template: `
  <google-search-bar></google-search-bar>
  <div class="container">
  <div class="form-group">
  <input placeholder="search for location" autocorrect="off" autocapitalize="off" spellcheck="off" type="text" class="form-control" #search [formControl]="searchControl">
 </div>
 <sebm-google-map [latitude]="latitude" [longitude]="longitude" [scrollwheel]="false" [zoom]="zoom">
  <sebm-google-map-marker [latitude]="latitude" [longitude]="longitude"></sebm-google-map-marker>
</sebm-google-map>
</div>
`})

export class GoogleMap implements OnInit {

 public latitude: number;
 public longitude: number;
 public searchControl: FormControl;
 public zoom: number;
 public fuzzyControl: FormControl;
 public address:string;

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

 constructor(
   private mapsAPILoader: MapsAPILoader
 ) {}

ngOnInit() {
//set google maps defaults
this.zoom = 4;
this.latitude = 39.8282;
this.longitude = -98.5795;

//create search FormControl
this.searchControl = new FormControl();
this.fuzzyControl = new FormControl();

//set current position
this.setCurrentPosition();
this.setMapsAPILoader();

//load Places Autocomplete
this.mapsAPILoader.load().then(() => {
  let autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, {
    types: ["address"]
  });
  autocomplete.addListener("place_changed", () => {
    //get the place result
    let place: google.maps.places.PlaceResult = autocomplete.getPlace();

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

private setCurrentPosition() {
 if ("geolocation" in navigator) {
  navigator.geolocation.getCurrentPosition((position) => {
    this.latitude = position.coords.latitude;
    this.longitude = position.coords.longitude;
    this.zoom = 12;
  });
}
}

This is Error

Unhandled Promise rejection: Cannot read property 'Autocomplete' of undefined ; Zone: angular ; Task: Promise.then ; Value: TypeError: Cannot read property 'Autocomplete' of undefined(…) TypeError: Cannot read property 'Autocomplete' of undefined

I can resolved this. please type this command. typings install dt~google.maps --global -S — Kohei Okazaki, Nov 27 '16 at 09:03

score 3 · Accepted Answer · edited Aug 12 '18 at 20:39

I have been been stuck on this same exact error with code that is very similar to yours.

I am only using the auto complete part of the code (no map display but my input call is the exact same as yours) so I can't completely verify this but the error seems to be caused by this in the input statement:

"#search [formControl]="searchControl"

Looking at this article I noticed how they used an id call within the input: angular2-google-maps autocomplete not working

So I removed that part of my input statement. It should look like this:

<input id="address" placeholder="search for location" autocorrect="off" autocapitalize="off" spellcheck="off" type="text" class="form-control">

And used javascript in my auto complete look look for that the id:

    this.mapsAPILoader.load().then(() => {
        let autocomplete = new google.maps.places.Autocomplete(
            <HTMLInputElement>document.getElementById("address"), {
            types: ['address']
        });
        autocomplete.addListener('place_changed', () => {
            this.ngZone.run(() => {
                // get the place result
                let place: google.maps.places.PlaceResult = autocomplete.getPlace();
                // add map calls here
            });
        });
    });

After changing that, the error disappears and auto-complete works as hoped. Hope this works for you.

One other thing to check is that you imported your API Key into the correct component. See the article above for reference.

Did not fix the problem, because we already loading the element with viewChild, but the undifined property is places if you read the error message. — Med Dhaker Abdeljawed, Nov 30 '20 at 13:57

Angular2 GoogleMapAPI AutoComplete Error Cannot read property 'Autocomplete'

1 Answers1