-
Notifications
You must be signed in to change notification settings - Fork 14
/
good-map.js
67 lines (60 loc) · 1.7 KB
/
good-map.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
'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 }));
});
}
});
}