Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Simple Polylines</title>
    <style>
      html, body, #map-canvas {
        height: calc(100% - 20px);
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=geometry"></script>
    <script src="http://arthur-e.github.io/Wicket/wicket.js" type="text/javascript"></script>
    <script src="http://arthur-e.github.io/Wicket/wicket-gmap3.js" type="text/javascript"></script>
  </head>
  <body>
    <div id="map-canvas"></div>
    <div id="result">MSSQLlength:9030962.21275109050000000000<br></div>
</body>
</html>
 
var map;
function createPoly() {
    wkt_str = "LINESTRING(-98.78 39.63,2.98 27.52)";
    var wkt = new Wkt.Wkt();
    try {
        wkt.read(wkt_str);
    } catch (e) {
        if (e.name === 'WKTError') {
            alert('Wicket could not understand the WKT string you entered.');
            return;
        }
    }
    var poly = wkt.toObject(map.defaults); // Make an object
    poly.setMap(map); // Add it to the map
    var bounds = new google.maps.LatLngBounds();
    poly.getPath().forEach(function(element,index){bounds.extend(element);});
    map.fitBounds(bounds);
   $('#result').append('Google length:' + google.maps.geometry.spherical.computeLength(poly.getPath().getArray()));
  $('#result').append('<br>Custom length:' + poly.Distance());
    
}
function initialize() {
    var mapOptions = {
        zoom: 13,
        center: new google.maps.LatLng(41.730723, -84.815529),
        mapTypeId: google.maps.MapTypeId.TERRAIN,
        defaults: {
            icon: 'red_dot.png',
            shadow: 'dot_shadow.png',
            //editable: true,
            strokeColor: '#990000',
            fillColor: '#EEFFCC',
            fillOpacity: 0.6
        }
    };
    map = new google.maps.Map(document.getElementById('map-canvas'),  mapOptions);
    createPoly();
}
google.maps.Polyline.prototype.Distance = function() {
   var dist = 0;
   for (var i=1; i < this.getPath().getLength(); i++) {
      dist += this.getPath().getAt(i).distanceFrom(this.getPath().getAt(i-1));
   }
   return dist;
};
google.maps.LatLng.prototype.distanceFrom = function(newLatLng) {
    var R = 6378137 ; // meters
    var lat1 = this.lat();
    var lon1 = this.lng();
    var lat2 = newLatLng.lat();
    var lon2 = newLatLng.lng();
    var dLat = (lat2-lat1) * Math.PI / 180.0;
    var dLon = (lon2-lon1) * Math.PI / 180.0;
    var a = Math.sin(dLat/2) * Math.sin(dLat/2.0) +
      Math.cos(lat1 * Math.PI / 180.0 ) * Math.cos(lat2 * Math.PI / 180.0 ) *
      Math.sin(dLon/2.0) * Math.sin(dLon/2.0);
    var c = 2.0 * Math.atan2(Math.sqrt(a), Math.sqrt(1.0-a));
    var d = R * c;
    return d;
};
google.maps.event.addDomListener(window, 'load', initialize);
Output 300px

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers