<script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<style type="text/css">
.odd {background-color:#F0FFEA;}
.even {background-color:#FAFEFF;}
.button {
color: white;
border: none;
padding: 0 10px;
font-family: 'Cuprum', Arial, Helvetica, sans-serif;
font-size: 18px;
line-height: 26px;
background: #73A100;
}
</style>
<script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var waypoints = [];
var max_waypoints_count=8;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var minsk = new google.maps.LatLng(53.9, 27.57);
var myOptions = {
zoom:5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: minsk
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
show_waypoints_table();
}
function formatTime(val){
val=parseInt(val/60);
var str="";
if (val>1440) {str+=parseInt(val/1440) + " д. "; val=parseInt(val%1440);}
if ((val>60) || str!="" ) {str+=parseInt(val/60) + " ч. ";}
str+=parseInt(val%60) + " мин.";
return str;
}
function calcRoute() {
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
var liters = document.getElementById("liters").value.replace(",",".");
var wayp = [];
if (document.getElementById("display_waypoints").checked) wayp = waypoints;
var request = {
origin:start,
destination:end,
waypoints: wayp,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
if (document.getElementById("display_directions").checked) document.getElementById("directionsPanel").style.display="block";
else document.getElementById("directionsPanel").style.display="none";
directionsDisplay.setDirections(response);
var route = response.routes[0];
var summaryPanel = document.getElementById("summary_panel");
summaryPanel.innerHTML = "";
function removeSpaces(str)
{
var res = str.replace(/\s/g, "");
return res;
}
var fuel_total=0;
var dist_total=0;
var time_total=0;
directionsCode = '<table border="0" cellspacing="0" cellpadding="4" style="border-collapse:collapse; border-color:#AAAAAA;">';
for (var i = 0; i < route.legs.length; i++) {
var dist = route.legs[i].distance.text;
dist = removeSpaces(dist);
var consumption = parseInt(dist)*(liters/100);
directionsCode += '<tr align="center" style="background:#EEEEEE;"><td colspan="2">От <strong>' + route.legs[i].start_address + '</strong> до ';
directionsCode += '<strong>'+route.legs[i].end_address + '</strong></td></tr>';
directionsCode += '<tr align="left"><td>Расстояние:</td><td><strong>'+route.legs[i].distance.text + '</strong></td></tr>';
directionsCode += '<tr align="left"><td>Время в пути:</td><td><strong>'+route.legs[i].duration.text + '</strong></td></tr>';
directionsCode += '<tr align="left"><td>Расход топлива:</td><td><strong>' + consumption.toFixed(2) + ' л</strong></td></tr>';
fuel_total += consumption;
dist_total += parseInt(dist);
time_total += parseInt(route.legs[i].duration.value);
}
directionsCode += '</table>';
if (route.legs.length>1){
directionsCode += "<br />Общее расстояние: <strong>" + dist_total.toFixed(0) + "</strong> км<br />";
directionsCode += "Общее время в пути: <strong>" + formatTime(time_total.toFixed(0)) + "</strong><br />";
directionsCode += "Общий расход топлива: <strong>" + fuel_total.toFixed(2) + "</strong> л<br /><br />";
}
summaryPanel.innerHTML = directionsCode;
} else {
alert("Произошла ошибка: " + status);
}
});
}
function add_waypoint(){
if (waypoints.length<max_waypoints_count){
waypoints.push({
location:document.getElementById("city_name").value,
stopover:true
});
show_waypoints_table();
}
}
function delete_waypoint(id){
waypoints.splice(id,1);
show_waypoints_table();
}
function show_waypoints_table(){
if (waypoints.length>0){
var tableCode = '<table border="0" cellspacing="0" cellpadding="4" style="border-collapse:collapse; border-color:#AAAAAA;">';
for (var r = 0; r < waypoints.length; r++){
tableCode += '<tr align="left" class="'+((r&1)?'odd':'even')+'">'
tableCode += '<td>'+(r+1)+'.</td>';
tableCode += '<td>'+waypoints[r].location+'</td>';
tableCode += '<td><a href="#" onclick="delete_waypoint('+r+'); return false;"><img src="/images/delete.png"></a></td>';
tableCode += '</tr>';
}
tableCode += '</table>';
} else {
tableCode='<em>Список пуст</em>'
}
document.getElementById('waypoints_table').innerHTML = tableCode;
}
function show_hide_waypoints(show){
if (show) document.getElementById('waypoints').style.display="block";
else document.getElementById('waypoints').style.display="none"
}
window.onload = initialize;
</script>
<div id="directionsPanel" style="float:right; height:100%; width:40%"></div>
<div class="data_select">
<p><b>Исходный пункт:</b><br />
<input name="start" type="text" id="start" size="40" maxlength="60" value="Москва" /></p>
<input name="display_waypoints" type="checkbox" id="display_waypoints" value="" onclick="show_hide_waypoints(this.checked);" /><label for="display_waypoints">Указать промежуточные пункты</label></p>
<div id="waypoints" style="display:none;">
<b>Список промежуточных пунктов:</b>
<div id="waypoints_table"></div>
<p><b>Город: </b><input name="city_name" type="text" id="city_name" size="20" maxlength="60" value=Тула" />
<input name="add_button" id="add_button" class="button" type="button" onclick="add_waypoint();" value="Добавить" /></p>
<br />
</div>
<p><b>Пункт назначения:</b><br />
<input name="end" type="text" id="end" size="40" maxlength="60" value="Рязань" /></p>
<p><b>Расход топлива на 100 км (в литрах):</b><br />
<input name="liters" type="text" id="liters" size="2" maxlength="10" value="10" /></p>
<p><input name="display_directions" type="checkbox" id="display_directions" value="" /><label for="display_directions">Отображать список направлений движения</label></p>
<p><input type="button" name="button" id="button" value="Расчет" onclick="calcRoute();" style="width: 150px; height: 30px;" /></p>
</div>
<br />
<div id="map" style="height: 300px; width: 400px;"></div>
<br />
<div id="summary_panel" style="width:70%;height 100%"></div>
