@strawberry-3-141 I encountered the same issue when trying to create a map the showing the route of the last Strava activity.
To continue using google maps, my solution was a little more complex, but if I recall correctly allowed me to specify a callback when loading the Google Maps API. Though I hadn’t thought about loading it in the start function :) :
start: function() {
this.mapId = this.identifier + "_gmap";
Log.log(this.name + ' is started!');
},
// Override dom generator.
getDom: function() {
var self = this;
var wrapper = document.createElement("div");
var map = document.createElement("div");
map.id = this.mapId;
map.classList.add("map-canvas");
map.style.height = "200px";
map.style.width = "200px";
wrapper.appendChild(map);
this.getScript('https://www.google.com/jsapi', function() {
google.load('maps', '3', { other_params: 'key=' + self.config.google_maps_key, callback: function() {
self.initMap();
}});
});
return wrapper;
},
initMap: function() {
if (typeof google === 'object' && typeof google.maps === 'object') {
// Create map
//var mapContainer = document.getElementById(this.mapId);
var map = new google.maps.Map(document.getElementById(this.mapId), {
backgroundColor: 'none',
});
map.setZoom(8);
map.setCenter(new google.maps.LatLng(37.4419, -122.1419));
}
},
getScript: function(source, callback) {
var script = document.createElement('script');
var prior = document.getElementsByTagName('script')[0];
script.async = 1;
prior.parentNode.insertBefore(script, prior);
script.onload = script.onreadystatechange = function( _, isAbort ) {
if(isAbort || !script.readyState || /loaded|complete/.test(script.readyState) ) {
script.onload = script.onreadystatechange = null;
script = undefined;
if(!isAbort) { if(callback) callback(); }
}
};
script.src = source;
}
In the end I have currently settled on using Leaflet.js - which, depending on which tile layer you use, has the added benefit of not requiring API keys (one less thing for users to configure), can be loaded locally (and via the getScripts function) and there are existing black and white/grayscale map tiles available which compliment the Mirror.
// Subclass getScripts method.
getScripts: function() {
return [
this.file('js/leaflet.js'),
];
},
Hope this helps a little
