HeatMap from only two points(lat&lng) google maps api - google-maps-api-3

Question

Can I create a straight line of heatmap between 2 points when each point has a lat and lng using google maps API?
It seems to me that heatmap are graphs which are based on scatter points.

Answer 1

Use the google.maps.geometry.spherical.interpolate method to evenly space points along the line between the two points:
var heatmapData = [];
for (var i = 0; i <= 100; i++) {
var point = google.maps.geometry.spherical.interpolate(polyline.getPath().getAt(0), polyline.getPath().getAt(1), i / 100);
heatmapData.push(point);
}
var heatmap = new google.maps.visualization.HeatmapLayer({
data: heatmapData,
map: map
});
proof of concept fiddle
code snippet:
var geocoder;
var map;
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var polyline = new google.maps.Polyline({
// map: map,
path: [{lat: 37.4688273,lng: -122.141},{lat: 37.4335499,lng: -122.203}]
});
var heatmapData = [];
for (var i = 0; i <= 100; i++) {
var point = google.maps.geometry.spherical.interpolate(polyline.getPath().getAt(0), polyline.getPath().getAt(1), i / 100);
heatmapData.push(point);
}
var heatmap = new google.maps.visualization.HeatmapLayer({
data: heatmapData,
map: map
})
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,visualization"></script>
<div id="map_canvas"></div>