vue-google-heatmap

1.1.0 • Public • Published

Installation

yarn add vue-google-heatmap

You will need an Google Maps Javascript API Key. You can get one here: Google Cloud Console

import VueGoogleHeatmap from 'vue-google-heatmap';

Vue.use(VueGoogleHeatmap, {
  apiKey: API_KEY_HERE
});

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

Name Type Default Description
width [String, Number] 100% Specify map width with a number (200), or with a string percentage (100%)
height [String, Number] 100% Specify map height with a number (200), or with a string percentage (100%)
initial-zoom Number 13 Initial Map Zoom
map-type String roadmap Type of map, options: ['roadmap', 'satellite']
lat Number 37.775 Map center latitude
lng Number -122.434 Map center longitude
points Array [] Points to generate Heatmap with, array of objects [{lat: 37.775, lng: -122.434}]
options Object {} Heatmap layer options (See available options here)

Readme

Keywords

none

Package Sidebar

Install

npm i vue-google-heatmap

Weekly Downloads

87

Version

1.1.0

License

MIT

Unpacked Size

5.77 kB

Total Files

6

Last publish

Collaborators

  • haemly