google-map-component.js

export class GMap extends HTMLElement{
    
    constructor(){
        super();
        const template = this.getTemplate();
        const shadow = this.attachShadow({mode: 'open'});
        shadow.appendChild(template.content.cloneNode(true));
    }

	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');
	}

	// triggered once the element is removed to the DOM.
	disconnectedCallback(){

	}

}
customElements.define('google-map', GMap);