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.
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).