TypeError: Cannot read property 'Autocomplete' of undefined in Angular 2

Question

I want to use an Angular 2 Google map autocomplete and I found this directive.

When I tried to use it, it gives me this error:

errors.ts:42 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'Autocomplete' of undefined

I dont know if I missed something. Anyway, here's the code of the directive:

import {Directive, ElementRef, EventEmitter, Output} from '@angular/core';
import {NgModel} from '@angular/forms';

declare var google:any;

@Directive({
selector: '[Googleplace]',
providers: [NgModel],
host: {
'(input)' : 'onInputChange()'
}
})
export class GoogleplaceDirective {

@Output() setAddress: EventEmitter<any> = new EventEmitter();
modelValue:any;
 autocomplete:any;
private _el:HTMLElement;


constructor(el: ElementRef,private model:NgModel) {
this._el = el.nativeElement;
this.modelValue = this.model;
var input = this._el;

 this.autocomplete = new google.maps.places.Autocomplete(input, {});
 google.maps.event.addListener(this.autocomplete, 'place_changed', ()=> {
  var place = this.autocomplete.getPlace();
  this.invokeEvent(place);

});
 }

  invokeEvent(place:Object) {
  this.setAddress.emit(place);
}

 onInputChange() {
console.log(this.model);
}
 }

Here's how to use it:

<input type="text" class="form-control" placeholder="Location" name="Location" [(ngModel)]="address" #LocationCtrl="ngModel"
    Googleplace (setAddress)="getAddressOnChange($event,LocationCtrl)">

You should try to console.log(google.maps) and see if it own a places attribute before this line : this.autocomplete = new google.maps.places.Autocomplete(input, {}); — Nolyurn
– Nolyurn, Commented Aug 23, 2017 at 12:30
it gives me this:{"Animation":{"BOUNCE":1,"DROP":2,"Zo":3,"Uo":4},"ControlPosition":{"TOP_LEFT":1,"TOP_CENTER":2,"TOP":2,"TOP_RIGHT":3,"LEFT_CENTER":4,"LEFT_TOP":5,"LEFT":5,"LEFT_BOTTOM":6,"RIGHT_TOP":7,"RIGHT":7...................(the object is so long) — aqw aqwx
– aqw aqwx, Commented Aug 23, 2017 at 12:32

mattobob · Accepted Answer · 2017-08-24 08:33:02Z

13

If you are using google maps you have to import the Api in the ngmodule like this:

@NgModule({
  declarations: [...],
  imports: [...,
    AgmCoreModule.forRoot({
      clientId: '<mandatory>',
      //apiVersion: 'xxx', // optional
      //channel: 'yyy', // optional
      //apiKey: 'zzz', // optional
      language: 'en',
      libraries: ['geometry', 'places']
    })
  ],
  providers: [...],
  bootstrap: [...]
})

the library 'places' is needed to use the autocomplete module.

Than use it like this:

    import {MapsAPILoader} from "@agm/core";
    ...
    constructor(private mapsAPILoader: MapsAPILoader,
    ...
        this.mapsAPILoader.load().then(() => {
          let autocomplete = new window['google'].maps.places.Autocomplete(..., ...);

          autocomplete.addListener("place_changed", () => { ...

You can take a look here: Angular 2 + Google Maps Places Autocomplete

edited Aug 24, 2017 at 8:33

answered Aug 24, 2017 at 8:09

mattobob

8634 gold badges15 silver badges41 bronze badges

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

Comments

johannesMatevosyan · Accepted Answer · 2020-06-26 12:38:41Z

3

This approach helped me to get the rid of this error. Just change the google maps api import to like this:

https://maps.googleapis.com/maps/api/js?key=YOURAPIKEY

Then add &libraries=places to the end of URL so it looks like this:

<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=YOURAPIKEY&libraries=places">
</script>

answered Jun 26, 2020 at 12:38

johannesMatevosyan

2,3082 gold badges39 silver badges44 bronze badges

Collectives™ on Stack Overflow

TypeError: Cannot read property 'Autocomplete' of undefined in Angular 2

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related