You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
67 lines
1.7 KiB
67 lines
1.7 KiB
6 years ago
|
'use strict';
|
||
|
|
|
||
|
|
{
|
||
|
|
let initCalled;
|
||
|
|
const callbackPromise = new Promise((r) => window.__initGoodMap = r);
|
||
|
|
|
||
|
|
function loadGoogleMaps(apiKey) {
|
||
|
|
if (!initCalled) {
|
||
|
|
const script = document.createElement('script');
|
||
|
|
script.src = 'https://maps.googleapis.com/maps/api/js?' +
|
||
|
|
(apiKey ? `key=${apiKey}&` : '') +
|
||
|
|
'callback=__initGoodMap';
|
||
|
|
document.head.appendChild(script);
|
||
|
|
initCalled = true;
|
||
|
|
}
|
||
|
|
return callbackPromise;
|
||
|
|
}
|
||
|
|
|
||
|
|
customElements.define('good-map', class extends HTMLElement {
|
||
|
|
static get observedAttributes() {
|
||
|
|
return ['api-key', 'zoom', 'latitude', 'longitude', 'map-options'];
|
||
|
|
}
|
||
|
|
|
||
|
|
attributeChangedCallback(name, oldVal, val) {
|
||
|
|
switch (name) {
|
||
|
|
case 'api-key':
|
||
|
|
this.apiKey = val;
|
||
|
|
break;
|
||
|
|
case 'zoom':
|
||
|
|
case 'latitude':
|
||
|
|
case 'longitude':
|
||
|
|
this[name] = parseFloat(val);
|
||
|
|
break;
|
||
|
|
case 'map-options':
|
||
|
|
this.mapOptions = JSON.parse(val);
|
||
|
|
break
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
constructor() {
|
||
|
|
super();
|
||
|
|
|
||
|
|
this.map = null;
|
||
|
|
this.apiKey = null;
|
||
|
|
this.zoom = null;
|
||
|
|
this.latitude = null;
|
||
|
|
this.longitude = null;
|
||
|
|
this.mapOptions = {};
|
||
|
|
}
|
||
|
|
|
||
|
|
connectedCallback() {
|
||
|
|
loadGoogleMaps(this.apiKey).then(() => {
|
||
|
|
if (!this.mapOptions.zoom) {
|
||
|
|
this.mapOptions.zoom = this.zoom || 0;
|
||
|
|
}
|
||
|
|
if (!this.mapOptions.center) {
|
||
|
|
this.mapOptions.center = {
|
||
|
|
lat: this.latitude || 0,
|
||
|
|
lng: this.longitude || 0
|
||
|
|
};
|
||
|
|
}
|
||
|
|
this.map = new google.maps.Map(this, this.mapOptions);
|
||
|
|
this.dispatchEvent(new CustomEvent('google-map-ready', { detail: this.map }));
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|