angular2嵌入谷歌地图

Question

我想在不使用angular2-google-maps组件的情况下将google地图集成到我的应用中。我试着按照入门教程

Google maps - Hello world

当我把这个教程中的两个脚本放在index.html文件中并创建一个map组件时，它基本上只链接到一个带有<div id="map"></div>标签的html文件，我收到以下错误：< / p>

TypeError: Cannot read property 'offsetWidth' of null.

这可能是由于脚本在加载实际div之前执行。如何在加载所有元素后执行这些脚本？将脚本添加到我的地图组件的html部分似乎不起作用。

谢谢！

Answer 1

尝试从google地图脚本标记中删除async属性。 如果仍然无效，您可以尝试使用此Synchronous Loading

祝你好运。

Answer 2

您可以尝试使用相同的方法让jQuery与Angular 2一起运行。

使用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

您可以尝试AGM或@ angular/google-maps

我个人更喜欢第二个选项，但是两个链接都很好地解释了如何在有角度的应用程序中实现gmap。