javascript - how to calculate polyline distance?

Question

function createLine()
{

geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(7.5653, 80.4303);
var mapOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("directionpanel"), mapOptions);

var address = document.getElementById('startvalue').value;
var address2 = document.getElementById('endvalue').value;

var temp, temp2;

geocoder.geocode({ 'address': address }, function (results, status) {
    temp = results[0].geometry.location;
    geocoder.geocode({ 'address': address2 }, function (results, status) {
        temp2 = results[0].geometry.location;

    var route = [
      temp,
      temp2
    ];

    var polyline = new google.maps.Polyline({
        path: route,
        strokeColor: "#ff0000",
        strokeOpacity: 0.6,
        strokeWeight: 5
    });

    polyline.setMap(map);
    });
});
}

This code work fine. I want to calculate the distance of the line which I created. I want to display this value in meters via an alert. Please help me... (In this case two points connect directly with the line. I want to calculate that direct line distance. )

Answer 1

Use google.maps.geometry.spherical.computeLength (be sure to include the geometry library)

function createLine()
{

geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(7.5653, 80.4303);
var mapOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("directionpanel"), mapOptions);

var address = document.getElementById('startvalue').value;
var address2 = document.getElementById('endvalue').value;

var temp, temp2;

geocoder.geocode({ 'address': address }, function (results, status) {
    temp = results[0].geometry.location;
    geocoder.geocode({ 'address': address2 }, function (results, status) {
        temp2 = results[0].geometry.location;

    var route = [
      temp,
      temp2
    ];

    var polyline = new google.maps.Polyline({
        path: route,
        strokeColor: "#ff0000",
        strokeOpacity: 0.6,
        strokeWeight: 5
    });

    var lengthInMeters = google.maps.geometry.spherical.computeLength(polyline.getPath());
    alert("polyline is "+lengthInMeters+" long");

    polyline.setMap(map);
    });
});
}

Working example (updated the example from your last question to include the length calculation)

code snippet:

var geocoder;
var map;

function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(7.5653, 80.4303);
  var mapOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map"), mapOptions);

  createLine();
}

function createLine() {

  var address = document.getElementById('startvalue').value;
  var address2 = document.getElementById('endvalue').value;

  var temp, temp2;

  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status != "OK") alert("geocode of address:" + address + " failed, status=" + status);
    temp = results[0].geometry.location;
    document.getElementById('results').innerHTML += temp.toUrlValue() + "<br>";
    geocoder.geocode({
      'address': address2
    }, function(results, status) {
      if (status != "OK") alert("geocode of address:" + address + " failed, status=" + status);
      temp2 = results[0].geometry.location;
      document.getElementById('results').innerHTML += temp2.toUrlValue() + "<br>";

      var route = [
        temp,
        temp2
      ];

      var polyline = new google.maps.Polyline({
        path: route,
        strokeColor: "#ff0000",
        strokeOpacity: 0.6,
        strokeWeight: 5
      });

      var lengthInMeters = google.maps.geometry.spherical.computeLength(polyline.getPath());
      // alert("polyline is "+lengthInMeters+" long");            
      document.getElementById('results').innerHTML += "Polyline is " + lengthInMeters + " meters long<br>";

      polyline.setMap(map);
      var bounds = new google.maps.LatLngBounds();
      bounds.extend(temp);
      bounds.extend(temp2);
      map.fitBounds(bounds);
    });
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

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

<input id="startvalue" type="text" width="90" value="Megaswewa, Sri Lanka"></input>
<input id="endvalue" type="text" width="90" value="Kandy, Sri Lanka"></input>
<input type="button" value="Geocode" onclick="createLine()"></input>
<div id="map" style="width:600px;height:500px;"></div>
<div id="results"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry"></script>