Angular2 GoogleMapAPI AutoComplete Error Cannot read property 'Autocomplete' - google-maps

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

Answer 1

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.