lazy load google maps updated web component

google-map-component-updated.js

import {EventBus} from '../../EventBus';
import { GoogleMapScriptLoader } from "../../Service/gmapLoader";

export class GMap extends HTMLElement{
    
    constructor(){
        super();
        const template = this.getTemplate();
        const shadow = this.attachShadow({mode: 'open'});
        shadow.appendChild(template.content.cloneNode(true));
        this.gmapLoader = new GoogleMapScriptLoader();
        this.eventBus = new EventBus();
        this.eventBus.subscribe('onLoad',this.handleOnLoad.bind(this));
    }
    
    getTemplate(){
        const template = document.createElement('template');
        template.innerHTML = `
        <style>#map{
            height:400px;
            width: 400px;
        }
        </style>
        <div id="map" style="height:400px;width:400px"></div>
        `;
		return template;
    }
    
    // triggered once the element is added to the DOM.
    async connectedCallback(){
        console.log('connected');
    }
    
    async handleOnLoad(){
        await this.gmapLoader.loadGoogleMapLib();
        this.render();
        // console.log("handleOnLoad");
    }

    render(){
        if(!this.map){
            const shimla = new google.maps.LatLng(31.1048, 77.1734);
            this.map = new google.maps.Map(
                this.shadowRoot.getElementById('map') ,
                {center: shimla, zoom: 15}
            );
            const marker = new google.maps.Marker({position: shimla, map: this.map});
        }
    }
    
    // triggered once the element is removed to the DOM.
    disconnectedCallback(){
    }
        
}
customElements.define('google-map', GMap);