distance of a polyline

13,860

Solution 1

The "geometry" library has a computeDistanceBetween method.

This will return the result in meters:

var polylineLength = 0;
for (var i = 0; i < markersPath.length; i++) {
  var lat = parseFloat(markersPath[i].getAttribute("lat"));
  var lng = parseFloat(markersPath[i].getAttribute("lng"));
  var pointPath = new google.maps.LatLng(lat,lng);
  path.push(pointPath);
  if (i > 0) polylineLength += google.maps.geometry.spherical.computeDistanceBetween(path[i], path[i-1]);

}
alert("the length of the polyline is "+polylineLength+" meters");

Update: There is now also a computeLength in the geometry library:

computeLength(path[, radius])
Parameters:
path: Array|MVCArray
radius: number optional
Return Value: number
Returns the length of the given path.

const polyline = new google.maps.Polyline({
    path: polylineCoordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2,
    map: map
  });
var polylineLength = google.maps.geometry.spherical.computeLength(polyline.getPath());

proof of concept fiddle

code snippet:

// This example creates a 2-pixel-wide red polyline showing the path of
// a drive from New York, NY to Newark, NJ
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"),{
  center: {lat:40.71248,lng: -74.006200},
  zoom: 10
  });
  const polyline = new google.maps.Polyline({
    path: polylineCoordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2,
    map: map
  });
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < polyline.getPath().getLength(); i++) {
    console.log(polyline.getPath().getAt(i).toUrlValue(6));
    bounds.extend(polyline.getPath().getAt(i));
  }
  map.fitBounds(bounds);
  var polylineLength = google.maps.geometry.spherical.computeLength(polyline.getPath());
  document.getElementById('info').innerHTML = polylineLength.toFixed(2)+" meters, "+(polylineLength/1000).toFixed(2)+" km, "+(polylineLength/1609).toFixed(2)+" miles";
  console.log(polylineLength.toFixed(2)+" meters, "+(polylineLength/1000).toFixed(2)+" km, "+(polylineLength/1609).toFixed(2)+" miles");
}
// per Google Directions service 13.9 mi. About 31 mins
// 13.9 mi = 22.36988 km
const polylineCoordinates = [
{lat:40.712480,lng:-74.006200},
{lat:40.712450,lng:-74.006150},
{lat:40.712310,lng:-74.005810},
{lat:40.712300,lng:-74.005810},
{lat:40.712300,lng:-74.005800},
{lat:40.712290,lng:-74.005790},
{lat:40.712280,lng:-74.005780},
{lat:40.712260,lng:-74.005770},
{lat:40.712250,lng:-74.005770},
{lat:40.712130,lng:-74.005700},
{lat:40.712130,lng:-74.005700},
{lat:40.712090,lng:-74.005830},
{lat:40.712050,lng:-74.005970},
{lat:40.712020,lng:-74.006090},
{lat:40.711980,lng:-74.006230},
{lat:40.711930,lng:-74.006390},
{lat:40.711930,lng:-74.006440},
{lat:40.711830,lng:-74.006810},
{lat:40.711800,lng:-74.006950},
{lat:40.711770,lng:-74.007050},
{lat:40.711690,lng:-74.007420},
{lat:40.711670,lng:-74.007480},
{lat:40.711660,lng:-74.007510},
{lat:40.711660,lng:-74.007550},
{lat:40.711660,lng:-74.007570},
{lat:40.711660,lng:-74.007600},
{lat:40.711660,lng:-74.007650},
{lat:40.711670,lng:-74.007690},
{lat:40.711680,lng:-74.007710},
{lat:40.711690,lng:-74.007740},
{lat:40.711710,lng:-74.007780},
{lat:40.711710,lng:-74.007780},
{lat:40.711750,lng:-74.007840},
{lat:40.711800,lng:-74.007920},
{lat:40.711850,lng:-74.007990},
{lat:40.711870,lng:-74.008010},
{lat:40.711910,lng:-74.008050},
{lat:40.711950,lng:-74.008070},
{lat:40.711970,lng:-74.008090},
{lat:40.712000,lng:-74.008120},
{lat:40.712080,lng:-74.008270},
{lat:40.712380,lng:-74.008930},
{lat:40.712470,lng:-74.009130},
{lat:40.712650,lng:-74.009520},
{lat:40.712730,lng:-74.009680},
{lat:40.712730,lng:-74.009680},
{lat:40.712790,lng:-74.009650},
{lat:40.713280,lng:-74.009260},
{lat:40.713430,lng:-74.009140},
{lat:40.713810,lng:-74.008840},
{lat:40.714270,lng:-74.008480},
{lat:40.714370,lng:-74.008400},
{lat:40.714890,lng:-74.008000},
{lat:40.714940,lng:-74.007970},
{lat:40.715200,lng:-74.007750},
{lat:40.715440,lng:-74.007560},
{lat:40.715480,lng:-74.007520},
{lat:40.715960,lng:-74.007150},
{lat:40.716000,lng:-74.007110},
{lat:40.716040,lng:-74.007070},
{lat:40.716530,lng:-74.006680},
{lat:40.717080,lng:-74.006240},
{lat:40.717170,lng:-74.006180},
{lat:40.717600,lng:-74.005830},
{lat:40.717680,lng:-74.005770},
{lat:40.717780,lng:-74.005680},
{lat:40.717870,lng:-74.005620},
{lat:40.717960,lng:-74.005540},
{lat:40.717960,lng:-74.005540},
{lat:40.718020,lng:-74.005530},
{lat:40.718050,lng:-74.005520},
{lat:40.718110,lng:-74.005480},
{lat:40.718180,lng:-74.005430},
{lat:40.718230,lng:-74.005390},
{lat:40.718270,lng:-74.005380},
{lat:40.718300,lng:-74.005360},
{lat:40.718330,lng:-74.005340},
{lat:40.718370,lng:-74.005320},
{lat:40.718410,lng:-74.005300},
{lat:40.718600,lng:-74.005230},
{lat:40.718670,lng:-74.005220},
{lat:40.718880,lng:-74.005180},
{lat:40.718940,lng:-74.005180},
{lat:40.719010,lng:-74.005170},
{lat:40.719060,lng:-74.005170},
{lat:40.719110,lng:-74.005170},
{lat:40.719370,lng:-74.005180},
{lat:40.719730,lng:-74.005200},
{lat:40.719850,lng:-74.005190},
{lat:40.719950,lng:-74.005190},
{lat:40.720280,lng:-74.005180},
{lat:40.720480,lng:-74.005190},
{lat:40.720630,lng:-74.005210},
{lat:40.721030,lng:-74.005250},
{lat:40.721380,lng:-74.005280},
{lat:40.721470,lng:-74.005280},
{lat:40.721740,lng:-74.005330},
{lat:40.721830,lng:-74.005340},
{lat:40.721930,lng:-74.005360},
{lat:40.722090,lng:-74.005380},
{lat:40.722130,lng:-74.005390},
{lat:40.722180,lng:-74.005390},
{lat:40.722230,lng:-74.005380},
{lat:40.723010,lng:-74.005060},
{lat:40.723630,lng:-74.004810},
{lat:40.723630,lng:-74.004810},
{lat:40.723650,lng:-74.004890},
{lat:40.723660,lng:-74.005000},
{lat:40.723670,lng:-74.005050},
{lat:40.723690,lng:-74.005280},
{lat:40.723710,lng:-74.005440},
{lat:40.723730,lng:-74.005700},
{lat:40.723760,lng:-74.005980},
{lat:40.723760,lng:-74.005980},
{lat:40.723810,lng:-74.006060},
{lat:40.723820,lng:-74.006150},
{lat:40.723840,lng:-74.006250},
{lat:40.723850,lng:-74.006290},
{lat:40.723860,lng:-74.006310},
{lat:40.723870,lng:-74.006360},
{lat:40.723890,lng:-74.006420},
{lat:40.723910,lng:-74.006470},
{lat:40.723940,lng:-74.006530},
{lat:40.723970,lng:-74.006590},
{lat:40.724000,lng:-74.006640},
{lat:40.724010,lng:-74.006670},
{lat:40.724030,lng:-74.006690},
{lat:40.724070,lng:-74.006740},
{lat:40.724110,lng:-74.006800},
{lat:40.724150,lng:-74.006840},
{lat:40.724200,lng:-74.006890},
{lat:40.724210,lng:-74.006900},
{lat:40.724240,lng:-74.006930},
{lat:40.724270,lng:-74.006950},
{lat:40.724300,lng:-74.006960},
{lat:40.724330,lng:-74.006980},
{lat:40.724360,lng:-74.006990},
{lat:40.724390,lng:-74.006990},
{lat:40.724440,lng:-74.006990},
{lat:40.724500,lng:-74.006990},
{lat:40.724580,lng:-74.006990},
{lat:40.724620,lng:-74.006990},
{lat:40.724710,lng:-74.007010},
{lat:40.724770,lng:-74.007000},
{lat:40.724850,lng:-74.006990},
{lat:40.724850,lng:-74.006980},
{lat:40.724890,lng:-74.006980},
{lat:40.724960,lng:-74.006970},
{lat:40.725010,lng:-74.006970},
{lat:40.725070,lng:-74.006970},
{lat:40.725120,lng:-74.006970},
{lat:40.725190,lng:-74.006960},
{lat:40.725290,lng:-74.006960},
{lat:40.725370,lng:-74.006980},
{lat:40.725420,lng:-74.006990},
{lat:40.725510,lng:-74.007020},
{lat:40.725580,lng:-74.007070},
{lat:40.725610,lng:-74.007110},
{lat:40.725640,lng:-74.007170},
{lat:40.725660,lng:-74.007220},
{lat:40.725690,lng:-74.007320},
{lat:40.725720,lng:-74.007420},
{lat:40.725720,lng:-74.007440},
{lat:40.725740,lng:-74.007560},
{lat:40.725750,lng:-74.007670},
{lat:40.725780,lng:-74.007910},
{lat:40.725800,lng:-74.008140},
{lat:40.725820,lng:-74.008270},
{lat:40.725830,lng:-74.008380},
{lat:40.725850,lng:-74.008600},
{lat:40.725850,lng:-74.008610},
{lat:40.725870,lng:-74.008750},
{lat:40.725880,lng:-74.008850},
{lat:40.725900,lng:-74.009080},
{lat:40.725930,lng:-74.009320},
{lat:40.725950,lng:-74.009540},
{lat:40.725950,lng:-74.009550},
{lat:40.726010,lng:-74.010020},
{lat:40.726010,lng:-74.010040},
{lat:40.726070,lng:-74.010490},
{lat:40.726190,lng:-74.011430},
{lat:40.726220,lng:-74.011670},
{lat:40.726260,lng:-74.012150},
{lat:40.726320,lng:-74.012590},
{lat:40.726350,lng:-74.012820},
{lat:40.726360,lng:-74.012840},
{lat:40.726390,lng:-74.013070},
{lat:40.726420,lng:-74.013290},
{lat:40.726450,lng:-74.013540},
{lat:40.726640,lng:-74.014940},
{lat:40.726690,lng:-74.015300},
{lat:40.726730,lng:-74.015540},
{lat:40.726870,lng:-74.016470},
{lat:40.726950,lng:-74.016930},
{lat:40.726980,lng:-74.017160},
{lat:40.727020,lng:-74.017400},
{lat:40.727200,lng:-74.018560},
{lat:40.727270,lng:-74.019020},
{lat:40.727570,lng:-74.020930},
{lat:40.727700,lng:-74.021810},
{lat:40.727740,lng:-74.022040},
{lat:40.727990,lng:-74.023670},
{lat:40.728030,lng:-74.023900},
{lat:40.728070,lng:-74.024140},
{lat:40.728210,lng:-74.025070},
{lat:40.728390,lng:-74.026230},
{lat:40.728500,lng:-74.026930},
{lat:40.728550,lng:-74.027510},
{lat:40.728570,lng:-74.027750},
{lat:40.728600,lng:-74.027990},
{lat:40.728680,lng:-74.028930},
{lat:40.728700,lng:-74.029160},
{lat:40.728830,lng:-74.030580},
{lat:40.728870,lng:-74.031050},
{lat:40.728900,lng:-74.031350},
{lat:40.728940,lng:-74.031760},
{lat:40.728940,lng:-74.031790},
{lat:40.728960,lng:-74.032020},
{lat:40.728970,lng:-74.032030},
{lat:40.728990,lng:-74.032150},
{lat:40.729020,lng:-74.032330},
{lat:40.729070,lng:-74.032480},
{lat:40.729110,lng:-74.032580},
{lat:40.729160,lng:-74.032720},
{lat:40.729170,lng:-74.032760},
{lat:40.729270,lng:-74.033070},
{lat:40.729530,lng:-74.033860},
{lat:40.729960,lng:-74.035160},
{lat:40.730040,lng:-74.035410},
{lat:40.730060,lng:-74.035460},
{lat:40.730120,lng:-74.035590},
{lat:40.730150,lng:-74.035680},
{lat:40.730190,lng:-74.035780},
{lat:40.730220,lng:-74.035840},
{lat:40.730290,lng:-74.035950},
{lat:40.730330,lng:-74.036020},
{lat:40.730400,lng:-74.036100},
{lat:40.730590,lng:-74.036330},
{lat:40.730710,lng:-74.036500},
{lat:40.730780,lng:-74.036580},
{lat:40.730840,lng:-74.036670},
{lat:40.730910,lng:-74.036780},
{lat:40.730970,lng:-74.036880},
{lat:40.731030,lng:-74.036980},
{lat:40.731040,lng:-74.037000},
{lat:40.731100,lng:-74.037100},
{lat:40.731140,lng:-74.037200},
{lat:40.731160,lng:-74.037240},
{lat:40.731220,lng:-74.037360},
{lat:40.731320,lng:-74.037580},
{lat:40.731340,lng:-74.037630},
{lat:40.731360,lng:-74.037680},
{lat:40.731380,lng:-74.037740},
{lat:40.731390,lng:-74.037800},
{lat:40.731450,lng:-74.038480},
{lat:40.731470,lng:-74.038720},
{lat:40.731540,lng:-74.039420},
{lat:40.731560,lng:-74.039510},
{lat:40.731590,lng:-74.039710},
{lat:40.731610,lng:-74.039940},
{lat:40.731620,lng:-74.040130},
{lat:40.731710,lng:-74.041100},
{lat:40.731710,lng:-74.041100},
{lat:40.731560,lng:-74.041130},
{lat:40.731430,lng:-74.041150},
{lat:40.731270,lng:-74.041170},
{lat:40.731210,lng:-74.041180},
{lat:40.731050,lng:-74.041200},
{lat:40.730820,lng:-74.041240},
{lat:40.730800,lng:-74.041240},
{lat:40.730720,lng:-74.041250},
{lat:40.730480,lng:-74.041300},
{lat:40.730350,lng:-74.041310},
{lat:40.730180,lng:-74.041330},
{lat:40.730180,lng:-74.041330},
{lat:40.730130,lng:-74.040980},
{lat:40.730110,lng:-74.040900},
{lat:40.730070,lng:-74.040660},
{lat:40.730040,lng:-74.040520},
{lat:40.730030,lng:-74.040430},
{lat:40.730010,lng:-74.040300},
{lat:40.730000,lng:-74.040170},
{lat:40.729970,lng:-74.039910},
{lat:40.729950,lng:-74.039720},
{lat:40.729950,lng:-74.039720},
{lat:40.729520,lng:-74.039790},
{lat:40.729380,lng:-74.039810},
{lat:40.729330,lng:-74.039820},
{lat:40.729210,lng:-74.039840},
{lat:40.729200,lng:-74.039840},
{lat:40.729180,lng:-74.039850},
{lat:40.728980,lng:-74.039880},
{lat:40.728960,lng:-74.039880},
{lat:40.728960,lng:-74.039890},
{lat:40.728950,lng:-74.039890},
{lat:40.728940,lng:-74.039890},
{lat:40.728670,lng:-74.039940},
{lat:40.728300,lng:-74.040000},
{lat:40.727960,lng:-74.040060},
{lat:40.727790,lng:-74.040090},
{lat:40.727630,lng:-74.040040},
{lat:40.727270,lng:-74.040110},
{lat:40.726690,lng:-74.040200},
{lat:40.726640,lng:-74.040200},
{lat:40.726510,lng:-74.040220},
{lat:40.726480,lng:-74.040230},
{lat:40.725800,lng:-74.040330},
{lat:40.725380,lng:-74.040400},
{lat:40.725200,lng:-74.040420},
{lat:40.725120,lng:-74.040430},
{lat:40.725010,lng:-74.040450},
{lat:40.724810,lng:-74.040490},
{lat:40.724680,lng:-74.040510},
{lat:40.724090,lng:-74.040590},
{lat:40.723620,lng:-74.040660},
{lat:40.723240,lng:-74.040720},
{lat:40.723000,lng:-74.040760},
{lat:40.722910,lng:-74.040770},
{lat:40.722240,lng:-74.040890},
{lat:40.721780,lng:-74.040960},
{lat:40.721500,lng:-74.041000},
{lat:40.721260,lng:-74.041020},
{lat:40.720810,lng:-74.041090},
{lat:40.720110,lng:-74.041200},
{lat:40.719820,lng:-74.041250},
{lat:40.719640,lng:-74.041290},
{lat:40.719260,lng:-74.041340},
{lat:40.719020,lng:-74.041370},
{lat:40.718740,lng:-74.041410},
{lat:40.718690,lng:-74.041480},
{lat:40.718600,lng:-74.041620},
{lat:40.718390,lng:-74.041960},
{lat:40.718290,lng:-74.042110},
{lat:40.718270,lng:-74.042130},
{lat:40.718250,lng:-74.042150},
{lat:40.718230,lng:-74.042170},
{lat:40.718200,lng:-74.042180},
{lat:40.718150,lng:-74.042200},
{lat:40.717990,lng:-74.042240},
{lat:40.717840,lng:-74.042270},
{lat:40.717760,lng:-74.042290},
{lat:40.717650,lng:-74.042310},
{lat:40.717650,lng:-74.042310},
{lat:40.717700,lng:-74.042740}
];

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map {
  height: 90%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Polylines</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=geometry&v=weekly"
      defer
    ></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="info"></div>
    <div id="map"></div>
  </body>
</html>

Solution 2

It's easy - using built in functions in the geometry library...

const polyLengthInMeters = google.maps.geometry.spherical.computeLength(yourPolyline.getPath().getArray());

To use the geometry library you declare it when you load the map api

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={YOUR_KEY}&amp;sensor=false&amp;libraries=geometry"></script>

for more info see:

Google API Polyline reference

Google API mcvArray reference

Google API Spherical geometry reference

13,860

Author by

Fran Rod

Updated on June 14, 2022

Comments

Fran Rod almost 2 years

I am working in a polyline and I need to obtain the distance of this. So if anyone can help I would be very gratefully.

Best regards.

This is my code:

function polyline() {
downloadUrl("xmlPolyline.asp", function(data) {
    var xml = xmlParse(data);
    var markersPath = xml.documentElement.getElementsByTagName("marker");   
    var path = [];


    for (var i = 0; i < markersPath.length; i++) {
    var lat = parseFloat(markersPath[i].getAttribute("lat"));
    var lng = parseFloat(markersPath[i].getAttribute("lng"));
    pointPath = new google.maps.LatLng(lat,lng);


    path.push(pointPath);

}//finish loop

 polyline = new google.maps.Polyline({
  path: path,
  strokeColor: "#FF0000",
  strokeOpacity: 1.0,
  strokeWeight: 2
});


//new polyline

polyline.setMap(map);

}); //end download url

}