CODEWITHSUNDEEP
google-maps-api-3
Brk
Brk

Reputation: 1297

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

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.

Upvotes: 2

Views: 531

Answers (1)

geocodezip
geocodezip

Reputation: 161334

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

enter image description here

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>

Upvotes: 2

Related Questions