Custom Element Example(Map/Marker)

map-marker.js

class GoogleMap extends HTMLElement{
  connectedCallback() {
    this.map = new google.maps.Map(this, {center:{lat: -25.363, lng: 131.044}, zoom:4 }); 
    this.initMarkers();
  }
  initMarkers() {
    setTimeout(_ => {
      Array.from(this.querySelectorAll('a-marker')).forEach(el => {
        el.init(this.map);
      })
    })
  }
}
customElements.define('a-google-map', GoogleMap);

class Marker extends HTMLElement {
  connectedCallback() {
    this.map && this.init(this.map);
  }
  disconnectedCallback() {
    this.marker.setMap(null);
    this.marker = null;
  }
  init(map) {
    this.map = this.map || map;
    let latLng = this.getAttribute('position').split(',');
    let position = {lat: parseFloat(latLng[0]), lng: parseFloat(latLng[1])};
    this.marker = new google.maps.Marker({position: position, map: map});
    console.log('position', this.marker)
  }
}
customElements.define('a-marker', Marker);