让谷歌地图在meteor项目中加载

Question

我有一个让我的流星项目显示地图的问题。我使用dburles作为我的googleapi库。我遵循了教程中的说明，我的GoogleMaps.load()返回undefined，这就是我认为的根本问题。

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

我的jade看起来是这样的

    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的答案也是可以接受的。

Answer 1

该库最近没有更新。它来自于NPM在Meteor中被黑客攻击的时代。

你可以尝试根据自己的喜好修改这段ES6代码（用自己的google key）。在你真正需要地图的屏幕加载时调用这个函数。你可以从多个页面多次调用它，因为该函数检查地图是否存在。你不希望在启动时有这个功能，除非你在第一个屏幕上显示地图，但是你会在组件视图级别调用这个功能。

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.compackage@googlemapsgoogle-maps-services-js。).