Get points on Polyline

Question

I plotted a Polyline between two points using the Google Maps API as seen in this example. Now I want to generate additional points along the same line. Is there a function to do this?

I don't want to add some random points to the line; I want the points to be on the curve generated between the two endpoints.

Answer 1

You can use the interpolate function of the spherical geometry library to calculate the position of a point on any line segment of the line:

var marker2 = new google.maps.Marker({
  map: map,
  position: google.maps.geometry.spherical.interpolate(
    new google.maps.LatLng(flightPlanCoordinates[1].lat,flightPlanCoordinates[1].lng),
    new google.maps.LatLng(flightPlanCoordinates[2].lat,flightPlanCoordinates[2].lng),
    0.6)
});

(note that the interpolate function only accepts google.maps.LatLng objects as arguments, not google.maps.LatLngLiterals, at least at this time)

proof of concept fiddle

code snippet:

// This example creates a 2-pixel-wide red polyline showing the path of William
// Kingsford Smith's first trans-Pacific flight between Oakland, CA, and
// Brisbane, Australia.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {
      lat: 0,
      lng: -180
    },
    mapTypeId: 'terrain'
  });

  var flightPlanCoordinates = [{
    lat: 37.772,
    lng: -122.214
  }, {
    lat: 21.291,
    lng: -157.821
  }, {
    lat: -18.142,
    lng: 178.431
  }, {
    lat: -27.467,
    lng: 153.027
  }];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });
  var marker = new google.maps.Marker({
    map: map,
    position: google.maps.geometry.spherical.interpolate(new google.maps.LatLng(flightPlanCoordinates[0].lat, flightPlanCoordinates[0].lng), new google.maps.LatLng(flightPlanCoordinates[1].lat, flightPlanCoordinates[1].lng), 0.75)
  });
  var marker2 = new google.maps.Marker({
    map: map,
    position: google.maps.geometry.spherical.interpolate(new google.maps.LatLng(flightPlanCoordinates[1].lat, flightPlanCoordinates[1].lng), new google.maps.LatLng(flightPlanCoordinates[2].lat, flightPlanCoordinates[2].lng), 0.6)
  });
  var marker3 = new google.maps.Marker({
    map: map,
    position: google.maps.geometry.spherical.interpolate(new google.maps.LatLng(flightPlanCoordinates[2].lat, flightPlanCoordinates[2].lng), new google.maps.LatLng(flightPlanCoordinates[3].lat, flightPlanCoordinates[3].lng), 0.8)
  });


  flightPath.setMap(map);
}

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?libraries=geometry&callback=initMap">
</script>