"npm i -S promise-polyfill" Then init map on page. Method sample of class:
/**
* Init map block
*
*/
buildMap() {
const gmapApi = new GoogleMapsApi();
gmapApi.load().then(() => {
let mapContainer = main.querySelector('.googleMap__map'),
iconUrl = mapContainer.dataset.map_pin,
zoom = 15,
style = googleMapStyle,
lat = parseFloat(mapContainer.dataset.lat),
lng = parseFloat(mapContainer.dataset.lng),
coordinates = {lat, lng};
const map = new google.maps.Map(mapContainer, {
zoom: zoom,
center: coordinates,
disableDefaultUI: true,
styles: style
});
const icon = {
url: iconUrl,
scaledSize: new google.maps.Size(50, 50)
}
const marker = new google.maps.Marker({
position: coordinates,
map: map,
icon: icon
});
});
return this;
};
/**
* IE 11 support
*
*/
import Promise from 'promise-polyfill';
export default class GoogleMapsApi {
/**
* Constructor set up config.
*
*/
constructor() {
// api key for google maps
this.apiKey = 'AIzaSyAX2ELMyoytfX4Ab-EN_qfDx1UcOmsLPJ0';
// set a globally scoped callback if it doesn't already exist
if (!window._GoogleMapsApi) {
this.callbackName = ('_GoogleMapsApi.mapLoaded');
window._GoogleMapsApi = this;
window._GoogleMapsApi.mapLoaded = this.mapLoaded.bind(this);
}
}
/**
* Load the Google Maps API javascript
*
*/
load() {
if (!this.promise) {
this.promise = new Promise(resolve => {
this.resolve = resolve;
if (typeof window.google === 'undefined') {
const script = document.createElement('script');
script.async = true;
script.defer = true;
script.src = `https://maps.googleapis.com/maps/api/js?key=${this.apiKey}&callback=${this.callbackName}`;
document.body.appendChild(script);
} else {
this.resolve();
}
});
}
return this.promise;
}
/**
* Globally scoped callback for the map loaded
*
*/
mapLoaded() {
if (this.resolve) {
this.resolve();
}
}
}