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.
Here is the code:
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Directions</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false®ion=US"></script>
<script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></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>
</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>
</body>
first of all you don't need to use $(document).ready() because you already bind the initialize function to the window onLoad event google.maps.event.addDomListener(window, 'load', initialize);
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.
use the callback in calcRoute like this:
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();
}
});
you also need to add the dist argument to you strprint:
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);
}
so your new code doesn't use document.ready and calculates the price immediately when the API responds.
the new <script> tag:
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);
});
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments