google-mapsmeteorcoffeescriptpugmeteor-accounts

Getting Google Maps to load in meteor project


I am have an issue of getting my meteor project to display a map. I am using dburles as my googleapi library. I have followed the instructions in the tutorial and my GoogleMaps.load() returns undefined, which is what I think is the underlying issue.


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

My jade looks like such



    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)

I know coffeescript and jade are not widely used so answers in Javascript would be acceptable also please.


Solution

  • that library has no recent update. It comes from a time when NPM was a hack in Meteor.

    You could try to amend this ES6 code to your liking (with your own google key). Call this function on load of the screen where you actually need a map. You can call it multiple times from multiple pages as the function checks if maps are present or not. You don't want to have this in Startup unless maybe you display a map on your first screen but then again, you would call the function at the component/view level.

    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 }
    
    

    Another option would be indeed to use the official NPM (https://www.npmjs.com/package/@googlemaps/google-maps-services-js).