angular2 embed google maps

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!


ANSWERS:


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.


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);
}
}


 MORE:


 ? google map Uncaught TypeError: Cannot read property 'offsetWidth' of null
 ? Enyo JS Uncaught TypeError: Cannot read property 'offsetWidth' of null
 ? google maps error Uncaught TypeError: Cannot read property 'offsetWidth' of null
 ? Google Event Listener: Uncaught TypeError: Cannot read property 'addEventListener' of null
 ? ....Uncaught TypeError: Cannot read property '__e3_' of null
 ? Getting 'Uncaught TypeError: Cannot read property 'geocode' of undefined ' error
 ? Getting 'Uncaught TypeError: Cannot read property 'geocode' of undefined ' error
 ? Getting 'Uncaught TypeError: Cannot read property 'geocode' of undefined ' error
 ? Uncaught TypeError: Cannot read property 'latitude' of undefined
 ? map.getBounds() weird behaviour (Uncaught TypeError: Cannot read property 'getNorthEast' of undefined)