<html>
<head>
<title>Testing the Itineraries</title>
<script type="text/javascript" src="http://js.sapo.pt/Bundles/SAPOMapsAPI.js"></script>
<script type='text/javascript'>
var map, itinerary;
function init(){
map = new SAPO.Maps.Map('map');
map.addControl(new SAPO.Maps.Control.MapType());
itinerary = new SAPO.Maps.Itineraries(map, 'results');
}
function clearResults(){
itinerary.cancel();
itinerary.clear();
}
function getResults(){
clearResults();
var from = document.getElementById('from').value;
var to = document.getElementById('to').value;
var select = document.getElementById('mode');
var mode = select.options[select.selectedIndex].value;
itinerary.getItinerary(from, to, {mode: mode});
}
</script>
</head>
<body onload='init();'>
<div id='map' style='width:50%; height:400px; float:left;'></div>
<div style='width:24%; float:left; border:solid 1px; margin-left: 10px;'>
<div onclick='clearResults();' style='cursor:pointer; text-align:right; margin-bottom:10px;'>Limpar resultados</div>
<div id='results' style='height:370px; overflow-y: scroll;'></div>
</div>
<div style='clear:both'>
From: <input id='from' type='text'/>
To: <input id='to' type='text'/>
<select id='mode'>
<option value='fastest'>fastest</option>
<option value='shortest'>shortest</option>
<option value='walk'>walking</option>
</select>
<input type='button' onclick='getResults();' value='Search' />
</div>
</body>
</html>