Added heatmap

README.md

@@ -141,6 +141,64 @@ export default {
 </script>
 ```
 
+### Heatmap
+If you need to add heatmap layer to the Map, add visualization library in load config and add GMapHeatmap as child of GMapMap component.
+
+```js
+import { createApp } from 'vue'
+import  VueGoogleMaps from '@fawmi/vue-google-maps'
+
+const app = createApp(App);
+app.use(VueGoogleMaps, {
+  load: {
+    key: 'YOUR_API_KEY_COMES_HERE',
+    libraries: "visualization"
+  },
+}).mount('#app')
+
+```
+
+```vue
+<template>
+  <GMapMap
+    ref="myMapRef"
+    :center="center"
+    :zoom="zoom"
+    style="width: 100%; height: 600px"
+  >
+    <GMapHeatmap :data="heatData"></GMapHeatmap>
+  </GMapMap>
+</template>
+<script>
+export default {
+  name: 'App',
+  setup() {
+    const center = {lat: 52.2985593, lng: 104.2455337}
+    const zoom = 12
+    const myMapRef = ref();
+    const heatData = ref([])
+
+    watch(myMapRef, googleMap => {
+      if (googleMap) {
+        googleMap.$mapPromise.then(map=> {
+          heatData.value = [
+            {location: new google.maps.LatLng({lat: 52.2985593, lng: 104.2455337})},
+          ];
+        })
+      }
+    });
+
+    return {
+      center,
+      zoom,
+      heatData,
+      myMapRef
+    }
+  },
+}
+</script>
+```
+
 Checkout docs for more component
 
 ## Access map object

src/components/heatmap.js

@@ -0,0 +1,25 @@
+import buildComponent from './build-component.js'
+
+const props = {
+  options: {
+    type: Object,
+    twoWay: false,
+    default: () => {
+    },
+  },
+  data: {
+    type: Array,
+    twoWay: true
+  },
+}
+
+const events = [];
+
+export default buildComponent({
+  mappedProps: props,
+  name: 'heatmap',
+  ctr: () => google.maps.visualization.HeatmapLayer,
+  events,
+})
+
+

src/main.js

@@ -9,6 +9,7 @@ import Marker from './components/marker.vue'
 import GMapCluster from './components/cluster.vue'
 import InfoWindow from './components/infoWindow.vue'
 import Map from './components/map.vue'
+import Heatmap from './components/heatmap'
 import Autocomplete from './components/autocomplete.vue'
 
 import MapElementMixin from './components/mapElementMixin'
@@ -28,6 +29,7 @@ export {
   InfoWindow,
   Map,
   MapElementMixin,
+  Heatmap,
   buildComponent,
   Autocomplete,
   MountableMixin,
@@ -72,6 +74,7 @@ export default function install(Vue, options) {
     Vue.component('GMapCircle', Circle)
     Vue.component('GMapRectangle', Rectangle)
     Vue.component('GMapAutocomplete', Autocomplete)
+    Vue.component('GMapHeatmap', Heatmap)
   }
 }