Vue

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBkDrtTsNyDpBPojKoyp6XxeHFUkp1H4OM&libraries=visualization"></script>
<div id="app">
{{msg}}
<hr>
<button @click='generateHeatmap()'>
Generate
</button>
<hr>
<div id="map"></div>
</div>

CSS

#app{	
padding:30px;
border:1px solid black;
margin:30px;
border-radius:1em;
background-color:#f6f6f6;
}

#map {
  height: 100%;
}

Vue

new Vue({
  el: "#app",
  data: {
	msg:"Map Test"
  },
  
  mounted(){
  	this.generateHeatmap()
  },
  methods: {
		generateHeatmap(){
			const map = new google.maps.Map(document.getElementById('map'), {
				zoom: 13,
				center: {lat: 37.775, lng: -122.434},
				mapTypeId: 'satellite'
			  });

			  const heatmap = new google.maps.visualization.HeatmapLayer({
				data: this.getPoints(),
				map: map
			  });
		  },

		  getPoints() {
				  return [
					new google.maps.LatLng(37.782551, -122.445368),
					new google.maps.LatLng(37.782745, -122.444586),
					new google.maps.LatLng(37.782842, -122.443688),
					new google.maps.LatLng(37.782919, -122.442815),
					new google.maps.LatLng(37.782992, -122.442112),
				]
		}
  }
})