StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>first of all you don't need to use <code>$(document).ready()</code> because you already bind the initialize function to the window onLoad event <code>google.maps.event.addDomListener(window, 'load', initialize);</code></p> <p>what you want is wait until the directions and distance are calculated, you don't really need to read it from the directionsPanel, you can read whatever you need directly from the API response.</p> <p>use the callback in <code>calcRoute</code> like this:</p> <pre><code>directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); dist = response.routes[0].legs[0].distance.text; stripint(dist); recalc(); } }); </code></pre> <p>you also need to add the dist argument to you <code>strprint</code>:</p> <pre><code>function stripint(val) { // 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); } </code></pre> <p>so your new code doesn't use document.ready and calculates the price immediately when the API responds.</p> <p>the new <code><script></code> tag:</p> <pre><code>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); dist = response.routes[0].legs[0].distance.text; stripint(dist); recalc(); } }); } 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(val) { // 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); }); } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload