Databases
StackOverflow2013
Postsdbo
POFiring multiple javascript functions on page load
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFiring multiple javascript functions on page load
    text
    copied!<p>I have managed to create a simple map with a marked route between 2 destinations. Additionally, I need to pull the distance value and then do some basic math with it (multiply it by 2). It all works, but not on page load. More precise, map is displayed on page load as well as distance, but distance value doesn't get pulled and it doesn't get multiplied by 2. I have managed to make it work on mouse move, but it's not the perfect replacement.</p> <p>Here is the code:</p> <p> </p> <pre><code>&lt;head&gt; &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Directions&lt;/title&gt; &lt;link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet"&gt; &lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;region=US"&gt;&lt;/script&gt; &lt;script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"&gt;&lt;/script&gt; &lt;script src="http://www.pengoworks.com/workshop/jquery/calculation/jquery.calculation.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script&gt; $(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 &lt; 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 &lt;span jstcache="7"&gt; // 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(); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="content"&gt; &lt;p&gt;Distance: &lt;span id="total"&gt;&lt;/span&gt; &lt;/p&gt; &lt;input type="text" value="0" name="dist" id="dist" /&gt; &lt;div id="total_price_ht_0" class="price"&gt;$0.00&lt;/div&gt; &lt;div id="map-canvas" style="width:100%; height:500px"&gt;&lt;/div&gt; &lt;div id="directionsPanel" style="width:100%; height:auto"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p></p>
 

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