I’ve started using Sage recently (it’s great!) - and I want to include this Google Maps (npm) package into the main.js file of Sage: https://www.npmjs.com/package/google-maps
It seems to compile correctly with both npm start and npm run build:production, however, in the browser, the JS console contains the following error: (index):2334 Uncaught TypeError: Cannot read property 'maps' of undefined(…)
For some reason it doesn’t like the new google.maps or even new window.google.maps when I try to be more precise.
Does anybody know if there’s some weird Sage-related reason why this may be failing?
Good call @kalenjohnson - Based on what you’ve just said, would this work?
// import external dependencies
import 'jquery';
import 'bootstrap/dist/js/bootstrap';
import GoogleMapsLoader from 'google-maps';
// import local dependencies
import Router from './util/router';
import common from './routes/Common';
import home from './routes/Home';
import aboutUs from './routes/About';
// Use this variable to set up the common and page specific functions. If you
// rename this variable, you will also need to rename the namespace below.
const mapEl = document.getElementById('map');
const mapOpts = {
center: { lat: -34.397, lng: 150.644 },
scrollwheel: false,
zoom: 8,
};
const doLoadGmap = (google) => {
const newMap = new google.maps.Map(mapEl, mapOpts);
return newMap;
};
GoogleMapsLoader.KEY = 'xxxxxxxxx';
GoogleMapsLoader.load(doLoadGmap(google));
const routes = {
// All pages
common,
// Home page
home,
// About us page, note the change from about-us to aboutUs.
aboutUs,
};
// Load Events
document.addEventListener('DOMContentLoaded', () => new Router(routes).loadEvents());