angular2 embed google maps

Question

I want to integrate google maps into my app without using the angular2-google-maps component. I tried following the getting started tutorial

Google maps - Hello world

When I put the two scripts from the tutorial in the index.html file and create a maps component, which basically only links to an html file with the <div id="map"></div> tag in it, I get the following error:

TypeError: Cannot read property 'offsetWidth' of null.

This is probably due to the script being executed before the actual div is loaded. How can I make these scripts execute after all the elements have loaded? Adding the scripts to the html part of my maps component doesn't seem to work.

Thanks!

Answer 1

Try to remove the async attribute from the google maps script tag. If it still doesn't work, you can try using this Synchronous Loading

Good luck.

Answer 2

You can try to use the same approach that lets jQuery run with Angular 2.

Use setTimeout : This let's the jQuery run in the next execution cycle after Angular has finished loading all the child components.

export class HomePage {

constructor() {
    setTimeout(() => {

   // your code here 

    }, 0);
}
}

Answer 3

You can try AGM or @ angular/google-maps

Personnally I prefer the second options but both link explain well how to implement gmap in an angular app.