Commit bdc9e4d2 authored by feny85's avatar feny85
Browse files

Added heatmap

parent e4992dc7

README.md

+58 −0
Original line number Diff line number Diff line
@@ -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 → 100644
+25 −0
Original line number Diff line number Diff line 
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

+3 −0
Original line number Diff line number Diff line
@@ -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)

  }

}