Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Directions</title>
  </head>
  <body>
​
<div id="content">
​
<p>Distance: <span id="total"></span></p>
<input type="text" value="0" name="dist" id="dist">
<div id="total_price_ht_0" class="price">$0.00</div>
<div id="map-canvas" style="width:100%; height:500px"></div>
<div id="directionsPanel" style="width:100%; height:auto">
</div>
​
</div>
​
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&region=US"></script>
​
<script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript"></script>
<script src="http://www.pengoworks.com/workshop/jquery/calculation/jquery.calculation.min.js" type="text/javascript">
</script>
​
<script>
​
$(document).ready(function () {
​
    var rendererOptions = {
        draggable: false
    };
    var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
    var directionsService = new google.maps.DirectionsService();
    var map;
​
    function initialize() {
​
        var mapOptions = {
            zoom: 7,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
        };
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById('directionsPanel'));
​
        google.maps.event.addListener(directionsDisplay, 'directions_changed', function () {
            computeTotalDistance(directionsDisplay.directions);
        });
​
        calcRoute();
    }
​
    function calcRoute() {
​
        var request = {
            origin: 'Houston',
            destination: 'Dallas',
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
        });
    }
​
    function computeTotalDistance(result) {
        var total = 0;
        var myroute = result.routes[0];
        for (var i = 0; i < myroute.legs.length; i++) {
            total += myroute.legs[i].distance.value;
        }
        total = total / 1000.
        document.getElementById('total').innerHTML = total + ' km';
    }
​
    google.maps.event.addDomListener(window, 'load', initialize);
​
​
    function stripint() {
        var val = $('[jsdisplay=distance]').text(); // get text content of <span jstcache="7">
​
        // Replace using regex instead of strings, to catch more than the first match
        val = val.replace(/\./g, "");
        val = val.replace(/,/g, ".");
        val = val.replace(/_/g, ",");
​
        $('#dist').val(val);
    }
​
    function recalc() {
​
        $("[id^='total_price_ht']").calc(
        // the equation to use for the calculation
        "di * 10", {
            bind: "keyup",
            di: $("[id^='dist']")
        }, function (s) {
            // return the number as a dollar amount
            return "$" + s.toFixed(2);
        });
    }
​
    $('#content').mousemove(function () {
        stripint();
        recalc();
    });
​
    stripint();
    recalc();
});
</script>
​
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers