lazy-google-maps.vue

lazy-google-maps.vue

<template>
  <component
    :is="tag"
    :src="mapUrl"
    class="w-full h-96 animate-skeleton"
  />
</template>

<script>
export default {
  name: 'ui-map',
  props: {
    key: {
      type: String,
      required: true
    },
    address: {
      type: String,
      required: true
    }
  },
  data: () => ({
    observer: null,
    tag: 'div'
  }),
  computed: {
    mapUrl () {
      return `https://www.google.com/maps/embed/v1/place?key=${this.key}&q=${encodeURIComponent(this.address)}`
    }
  },
  mounted () {
    this.observer = new IntersectionObserver(([entry]) => {
      if (!entry.isIntersecting) return
      // stop observing if has already trigger
      this.observer.unobserve(entry.target)
      this.tag = 'iframe'
    }, {
      rootMargin: '50px'
    })
    this.observer.observe(this.$el)
  },
  beforeDestroy () {
    this.observer.unobserve(this.$el)
  }
}
</script>