1.0.2 • Published 3 years ago

vue2-google-heatmap v1.0.2

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

Installation

npm install vue2-google-heatmap --save

and

import VueGoogleHeatmap from 'vue2-google-heatmap';
Vue.use(VueGoogleHeatmap);

Important

Be sure that the Google Maps API was loaded and initialised before the component

Example

<template>
  <vue-google-heatmap :points="points" :width="400" :height="350" />
</template>

<script>
export default {
  data() {
    return {
      points: [
        {lat: 37.786117, lng:-122.440119},
        {lat: 37.786564, lng:-122.440209},
        {lat: 37.786905, lng:-122.440270},
        {lat: 37.786956, lng:-122.440279},
        {lat: 37.800224, lng:-122.433520},
        {lat: 37.800155, lng:-122.434101},
        {lat: 37.800160, lng:-122.434430},
        {lat: 37.800378, lng:-122.434527},
        {lat: 37.800738, lng:-122.434598},
        {lat: 37.800938, lng:-122.434650},
        {lat: 37.801024, lng:-122.434889},
        {lat: 37.800955, lng:-122.435392},
        {lat: 37.800886, lng:-122.435959}
      ]
    }
  }
}
</script>

heatmap example

Available Props

NameTypeDefaultDescription
widthString, Number100%Specify map width with a number (200), or with a string percentage (100%)
heightString, Number100%Specify map height with a number (200), or with a string percentage (100%)
initial-zoomNumber13Initial Map Zoom
map-typeStringroadmapType of map, options: 'roadmap', 'satellite'
latNumber37.775Map center latitude
lngNumber-122.434Map center longitude
pointsArray[]Points to generate Heatmap with, array of objects {lat: 37.775, lng: -122.434}