Google Object Undefined Using Angular2-google-maps And Google Places Searchbar

I am currently working on an angular2 application which uses Google Maps. I have embedded and instance of Google Maps into the app using the excellent sebm angular2-google-maps mod

Solution 1:

You need to inject the MapsAPILoader into your class, then call the load method.

Until the loader is complete the google object will not be accessible.

Example:

constructor(private _mapsAPILoader: MapsAPILoader) { }

ngAfterViewInit() {
  this._mapsAPILoader.load().then(() => {
    // Place your code in here...
  });
}

This answer was curtesy of amiller29au via github here - replicated for wider access.

Solution 2:

Angular runs after the index.html has loaded. If you put something in the ngOnInit (better would probably be ngAfterViewInit) then document.ready should already have fired.

The only way this can go wrong is if you have an async or defer tag on your script tag that gets the google library.

An even better solution would be to install google maps using node and set whatever loader you use to get the google library when needed (with the key googlemaps). Then you can place an import "googlemaps" in your PlacesComponent to be sure that the library is loaded

Solution 3:

You can use the object in the ngAfterViewInit event handler. It is fired after the view is loaded.