让谷歌地图加载到流星项目中答案

【问题标题】：Getting Google Maps to load in meteor project让谷歌地图加载到流星项目中
【发布时间】：2020-08-19 13:53:51
【问题描述】：

我遇到了让我的流星项目显示地图的问题。我使用 dburles 作为我的 googleapi 库。我已按照教程中的说明进行操作，我的 GoogleMaps.load() 返回 undefined，我认为这是根本问题。


    Meteor.startup ->
        GoogleMaps.load()
        console.log GoogleMaps.load()
        return

我的玉是这样的



    div#search-wrapper
            h2 Search for a ATM
            div#search-input.input-group
                input(for="search" type="text" placeholder="City, State, Zip, ect")
                div.input-group-append
                    button(type="submit" class="btn btn-info " id="search-button")
                        i.fas.fa-search
            button(type="submit" class="btn btn-info" id="find-nearMe") Find Near Me
        +map

    template(name="map")
        div.map-container
            googleMap(name="map" options=mapOptions)

我知道coffeescript和jade没有被广泛使用，所以Javascript中的答案也可以接受。

【问题讨论】：

请提供您正在使用的库和教程的链接。

标签： google-maps meteor coffeescript pug meteor-accounts

【解决方案1】：

该库最近没有更新。它来自 NPM 是 Meteor 的黑客时代。

您可以尝试根据自己的喜好修改此 ES6 代码（使用您自己的 google 密钥）。在实际需要地图的屏幕加载时调用此函数。您可以从多个页面多次调用它，因为该函数会检查地图是否存在。除非您在第一个屏幕上显示地图，否则您不希望在 Startup 中使用此功能，但又一次，您将在组件/视图级别调用该函数。

const loadGoogleMaps = () => {
  if (!window.google?.maps) {
    const script = document.createElement('script')
    script.src = 'https://maps.googleapis.com/maps/api/js?key=xxxxxx&libraries=places'
    script.defer = true
    document.head.appendChild(script)
  }
}

export { loadGoogleMaps }

另一个选择确实是使用官方 NPM (https://www.npmjs.com/package/@googlemaps/google-maps-services-js)。

【讨论】：