<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Directions Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var total = 0;
var totald=0;
var totaltotal=0;
var totaltotald=0;
var map;
var distante=[];
var nrd=0;
var timeout;
function DistControl(controlDiv, map)
{ 
	controlDiv.style.paddingRight = '5px';
	controlDiv.style.paddingBottom = '5px'; 
	var controlUI = document.createElement('DIV'); 
	controlUI.style.backgroundColor = '#0000ff'; 
	controlUI.style.borderStyle = 'solid'; 
	controlUI.style.borderWidth = '0px'; 
	controlUI.style.cursor = 'pointer'; 
	controlUI.style.textAlign = 'center'; 
	controlDiv.appendChild(controlUI);  
	var controlText = document.createElement('DIV');
	controlText.id="totaldistanta";
	controlText.style.fontFamily = 'Arial,sans-serif'; 
	controlText.style.color = '#ffffff';
	controlText.style.fontSize = '16px'; 
	controlText.style.textAlign= 'right';
	controlText.style.paddingLeft = '5px'; 
	controlText.style.paddingRight = '5px'; 
	controlText.style.paddingTop = '7px'; 
	controlText.style.paddingBottom = '7px';
	controlText.innerHTML = 'Click me';
	controlText.title = 'Lungime traseu'; 
	controlUI.appendChild(controlText);
	google.maps.event.addDomListener(controlText, 'click', function() { 
		controlText.innerHTML = totaltotal/1000+" Km in "+s_to_t(totaltotald);
	});
}
function renderDirections(result,start_point)
{
	var directionsRenderer = new google.maps.DirectionsRenderer;
	google.maps.event.addListener(directionsRenderer , 'directions_changed', function() {
		computeTotalDistance(directionsRenderer.directions,start_point);
	});
	directionsRenderer.setMap(map);
	directionsRenderer.setDirections(result);
}
var directionsService = new google.maps.DirectionsService;
function requestDirections(start, end, start_point) {
	directionsService.route({
		origin: start,
		destination: end,
		travelMode: google.maps.DirectionsTravelMode.DRIVING
	}, function(result) {
		renderDirections(result, start_point);
	});
}
function initialize()
{
	var myLatlng = new google.maps.LatLng(45.887924,28.097879);
	var myOptions = {   zoom: 5,   center: myLatlng,   mapTypeId: google.maps.MapTypeId.ROADMAP };
	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions );
	var distControlDiv = document.createElement('DIV'); 
	var distControl = new DistControl(distControlDiv, map); 
	distControlDiv.index = 1; 
	map.controls[google.maps.ControlPosition.TOP_RIGHT].push(distControlDiv);
	renderPoints();
}
function renderPoints()
{
//<<>>
function change_table(start_point,total)
{
	var table = document.getElementById('distable');
	for(i=1;i<table.rows.length;i++)
	{
		if(table.rows[i].cells[0].firstChild.data==start_point)
		{
			table.rows[i].cells[1].firstChild.data=total;
			break;
		}
	}
}
function s_to_t (s) 
{//din secunde in ceva de tipul n1"d"n2"m"n3"s"
   var zile=Math.floor(s/86400);
   var ore=Math.floor((s-zile*86400)/3600);
   var minute=Math.floor((s-zile*86400-ore*3600)/60);
   var secunde=s-zile*86400-ore*3600-minute*60;
   var retval;
   if(zile>0){
	   retval = String(zile)+"d "+(ore<10?"0":"")+String(ore)+"h "+(minute<10?"0":"")+String(minute)+"m "+(secunde<10?"0":"")+String(secunde)+"s";
   }
   else{
		if(ore>0){
			retval = String(ore)+"h "+(minute<10?"0":"")+String(minute)+"m "+(secunde<10?"0":"")+String(secunde)+"s";
	   }
	   else{
		   	if(minute>0){
				retval = String(minute)+"m "+(secunde<10?"0":"")+String(secunde)+"s";
		   }
		   else{
			   retval = String(secunde)+"s";
		   }
	   }
   }
   return retval; 
}
function computeTotalDistance(result,start_point)
{
	var myroute = result.routes[0];
	total=0;
	totald=0;
	for (i = 0; i < myroute.legs.length; i++)
	{
		total += myroute.legs[i].distance.value;
		totald += myroute.legs[i].duration.value;
    	}
	totaltotal += total;
	totaltotald += totald;
	document.getElementById(start_point).innerHTML=String(total);
	document.getElementById(start_point+"~durata").innerHTML=s_to_t(totald);
	document.getElementById('total').innerHTML=String(totaltotal);
	document.getElementById('totald').innerHTML=s_to_t(totaltotald);
}
function centreazapemasina()
{
	if(document.getElementById('masini').selectedIndex>=0)
	{
		var coords=document.getElementById('masini').options[document.getElementById('masini').selectedIndex].value.split(",");
		map.setCenter(new google.maps.LatLng(coords[0],coords[1]));
	}
}

</script>
</head>
<body onload="initialize()">
<div id='map_canvas' style='width: 85%; height: 100%; float:left;'></div>
<div id='stanga' style='width: 15%; height: 100%; float:right;'>
<fieldset>
<legend>Lista puncte</legend>
<b><select id='masini' size=10 style='width: 100%; font-size:12px; font-weight: bold' onclick=centreazapemasina()></b>
//..bb..
</select>
</fieldset><br>
<fieldset>
<legend>Tabel puncte</legend>
//..aa..
</fieldset><br>
</div>
</body></html>
