Skip to content

Instantly share code, notes, and snippets.

@kumaraksi
Last active February 24, 2019 07:26
Show Gist options
  • Save kumaraksi/e0073895a176cde9ff34fafa14a81416 to your computer and use it in GitHub Desktop.
Save kumaraksi/e0073895a176cde9ff34fafa14a81416 to your computer and use it in GitHub Desktop.
lazy load google maps updated web component
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment