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!

Try to check this link: http://stackoverflow.com/questions/22967790/uncaught-typeerror-cannot-read-property-offsetwidth-of-null — abielita, Jun 28 '16 at 08:18
Where is your style set for the map, in html or separate style file? — Gaurav Ram, Aug 10 '16 at 20:16

score 0 · Answer 1 · answered Jun 25 '16 at 09:14

0

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.

answered Jun 25 '16 at 09:14

Shlomi Haver

954
9
14

I've tried this, but it isn't working. I think the problem is that the map div is in another component that's loaded after the script. Also the inability to run scripts in the component html is blocking me here. – Raising Jun 25 '16 at 09:27
Can you put your code on [js fiddle](https://jsfiddle.net/), it will be much easier for me to help you. – Shlomi Haver Jun 25 '16 at 09:41

score 0 · Answer 2 · edited May 23 '17 at 12:32

0

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

edited May 23 '17 at 12:32

Community

1
1

answered Jun 26 '16 at 02:03

KB_

2,113
2
26
28

score 0 · Answer 3 · edited Nov 19 '20 at 21:40

0

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.

edited Nov 19 '20 at 21:40

Dharman

30,962
25
85
135

answered Nov 19 '20 at 21:34

mbagiella

256
2
12

angular2 embed google maps

3 Answers3