Lazy Loading Google Maps

I created a really lean page and then I had to embed Google Maps which made multiple requests and made the page slower. Not all users reach to the viewport with the map and very few of the ones who reach there use it interactively. So, this is how I implemented lazy-loading of the maps.

1. Do not load anything if the user isn't going to view it.
2. Show users a static map (image) if they reach the viewport.
3. Load a dynamic map only if they want to interact (i.e. click on the static map).

Following is a sample implementation in Vue.js. Lazy-loading of image is done via LazyLoad which reads the data-src attribute and writes src attribute lazily.

<template>
    <div>
        <div v-if="isStatic" class="has-text-centered" id="static-map-wrapper">
            <img :data-src="staticUrl" alt="Map" title="Click to browse" @click="loadDynamic"/>
        </div>
        <div v-else class="g-map" id="g-map"></div>
    </div>
</template>

<script>

  export default {
    props: {
      'lat': {}, 'lng': {}, 'zoom': {default: 14}
    },
    data() {
      return {
        isStatic: true,
        staticWidth: 640,
        staticHeight: 400,
        key: config.googleMapKey,
      }
    },
    computed: {
      staticUrl() {
        return `https://maps.googleapis.com/maps/api/staticmap?center=${this.lat},${this.lng}&zoom=${this.zoom}&maptype=roadmap
&markers=${this.lat},${this.lng}&key=${this.key}&size=${this.staticWidth}x${this.staticHeight}`;
      }
    },
    mounted() {
      window.initMap = () => {
        const el = document.getElementById('g-map');
        const latLng = new google.maps.LatLng(this.lat, this.lng);
        const options = {
          zoom: this.zoom,
          center: latLng
        };
        const map = new google.maps.Map(el, options);
        const marker = new google.maps.Marker({
          position: latLng,
        });
        marker.setMap(map);
      };

    },
    methods: {
      loadDynamic() {
        this.isStatic = false;
        if (window.google && google.maps) {
          window.initMap();
        } else {
          ClientUtils.loadScript(`https://maps.googleapis.com/maps/api/js?key=${this.key}&v=3&callback=initMap`);
        }
      }
    }
  };
</script>

<style scoped>
.g-map {
    height: 400px;
    margin: 0 auto;
    background: #ebe8de;
}
</style>

Example usage of the component:

<GMap lat="27.6861537" lng="85.3295763"/>