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
– Kohei Okazaki, Commented Nov 27, 2016 at 9:03

Stefan Falk · Accepted Answer · 2018-08-12 20:39:29Z

3

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.

edited Aug 12, 2018 at 20:39

Stefan Falk

25.8k62 gold badges227 silver badges422 bronze badges

answered Jan 30, 2017 at 18:15

Andrew Mogg

1026 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Med Dhaker Abdeljawed Over a year ago

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.

Collectives™ on Stack Overflow

Angular2 GoogleMapAPI AutoComplete Error Cannot read property 'Autocomplete'

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related