MeteoGroupInteractiveMap.js

function MeteoGroupInteractiveMap(domElement, options) {
  constructor(domElement, options) {
    // Do we want to hide this?
    // We might need to hide this in closures for map functionalities (zoom, pan etc.)
    // IMO we should definitly hide it.
    this.map = new google.maps.Map(domElement, options);
    // better:
    const map = new google.maps.Map(domElement, options);
    this.setupMapControls(map);
    
    this.layers = [];
    this.dataSources = [];
    
    this.setupMapEvents(map);
    

  }
  
  setupMapEvents(map) {
    map.addListener('click', event => {
      this.layers.forEach(layer => dispatchEvent({
        type: 'click',
        detail: { ...event.coords } // lat, lng, pixel x/y
      }))
    });
    
    // similar thing for :hover
  }
  
  addLayer(layer) {
    // maybe do a check first to avoid duplicate layers
    this.layers.push(layer);
  }
  
  setupMapControls(map) {
    this.setZoom = zoom => map.setZoom(zoom);
    //....
  }
}