Itineraries examples
Calculate an Itinerary
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>ViaMichelin Maps & Drive API</title>
<script src="http://api.viamichelin.com/apijs/js/api.js"
type="text/javascript"></script>
<script type="text/javascript">
VMAPI.registerKey("JSBS20070201123465789");
VMAPI.setLanguage("fra");
function search_start_location(){
document.getElementById('result_action').style.display = 'none';
document.getElementById('youritidiv').style.display = 'none';
Start_geocoder = new VMGeocoder();
Start_myaddress = new VMAddress();
var elements_formulaires =
document.forms['itisearch_form'].elements;
Start_myaddress.address = elements_formulaires['form_Start_address'].value;
Start_myaddress.zipCode = elements_formulaires['form_Start_CP'].value;
Start_myaddress.city = elements_formulaires['form_Start_city'].value;
Start_myaddress.countryVMCode = elements_formulaires['form_Start_country'].value;
Start_geocoder.addEventHandler("onCallBack",search_stop_location);
Start_geocoder.search(Start_myaddress);
}
function search_stop_location(){
Stop_geocoder = new VMGeocoder();
Stop_myaddress = new VMAddress();
var elements_formulaire =
document.forms['itisearch_form'].elements;
Stop_myaddress.address = elements_formulaire['form_Stop_address'].value;
Stop_myaddress.zipCode = elements_formulaire['form_Stop_CP'].value;
Stop_myaddress.city = elements_formulaire['form_Stop_city'].value;
Stop_myaddress.countryVMCode = elements_formulaire['form_Stop_country'].value;
Stop_geocoder.addEventHandler("onCallBack",search_step_location);
Stop_geocoder.search(Stop_myaddress);
}
function search_step_location(){
if (document.forms['itisearch_form'].elements['form_Step_address'].value != "" || document.forms['itisearch_form'].elements['form_Step_CP'].value != "" || document.forms['itisearch_form'].elements['form_Step_city'].value != ""){
Step_geocoder = new VMGeocoder();
Step_myaddress = new VMAddress();
var elements_formulaire =
document.forms['itisearch_form'].elements;
Step_myaddress.address = elements_formulaire['form_Step_address'].value;
Step_myaddress.zipCode = elements_formulaire['form_Step_CP'].value;
Step_myaddress.city = elements_formulaire['form_Step_city'].value;
Step_myaddress.countryVMCode = elements_formulaire['form_Step_country'].value;
Step_geocoder.addEventHandler("onCallBack",search_iti);
Step_geocoder.search(Step_myaddress);
} else {
search_iti();
}
}
function search_iti(){
myiti = new VMItinerary();
myiti.addStopOver(Start_geocoder.result);
var elements_formulaire =
document.forms['itisearch_form'].elements;
if (elements_formulaire['form_Step_address'].value != ""
|| elements_formulaire['form_Step_CP'].value != ""
|| elements_formulaire['form_Step_city'].value != ""){
myiti.addStopOver(Step_geocoder.result);
}
myiti.addStopOver(Stop_geocoder.result);
myiti.setItineraryType(elements_formulaire['form_Type'].value);
myiti.setItineraryVehicleType(elements_formulaire['form_Vh'].value);
myiti.setCarType(elements_formulaire['form_Cat'].value);
myiti.setFuelType(elements_formulaire['form_Carb'].value);
myiti.setFuelCost(elements_formulaire['form_Prix'].value);
myiti.addEventHandler("onCallBack",iti_found);
myiti.search();
}
function iti_found(){
alert('Itinerary found');
document.getElementById('result_action').style.display = '';
}
function display_roadsheet(){
if (typeof(myiti)!="undefined"){
document.getElementById('youritidiv').innerHTML = myiti.roadSheet.getHTML(mymap);
document.getElementById('youritidiv').style.display = '';
} else {
alert('No Itinerary loaded');
}
}
function display_onmap(){
if (typeof(myiti)!="undefined"){
if (typeof(mymap)!="undefined"){
document.getElementById('yourmapdiv').innerHTML = "";
mymap = new VMMap(document.getElementById("yourmapdiv"));
mymap.addLayer(myiti.getItiAsVMComplexLayer("#FF0000",7,0.5));
mymap.drawMapFromLayers();
} else {
mymap = new VMMap(document.getElementById("yourmapdiv"));
mymap.addLayer(myiti.getItiAsVMComplexLayer("#FF0000",7,0.5));
mymap.drawMapFromLayers();
}
mymap.addLayer(myiti.roadSheet.getLayer());
mymap.showMapTools(3);
} else {
alert('No Itinerary loaded');
}
}
function display_informations(){
strHTML =
"Total distance in meters:"
+myiti.getTotalDistance()+"m<br>"
+ "Distance covered on motorway: "
+myiti.getDistanceOnMotorway()+"m<br>"
+ "Total time in seconds: "
+myiti.getTotalTime()+"s<br>"
+ "Time on motorway:"
+myiti.getTimeOnMotorway()+"s<br>"
+ "Fuel cost:"
+myiti.getTotalGasConsumption()+"€<br>"
+ " Motorway toll cost:"
+myiti.getTollCost()+"€<br>"
+ "Label cost:"
+myiti.getRoadTaxCost()+"€<br>";
document.getElementById('youritiresumediv').style.display = '';
document.getElementById('youritiresumediv').innerHTML = strHTML;
}
function load_country(){
VMCountryUtil.addEventHandler(
"onCallBack",
function(){
document.getElementById("div_country_start").innerHTML =
VMCountryUtil.getSelectHTMLString("form_Start_country","FRA");
document.getElementById("div_country_stop").innerHTML =
VMCountryUtil.getSelectHTMLString("form_Stop_country","FRA");
document.getElementById("div_country_step").innerHTML =
VMCountryUtil.getSelectHTMLString("form_Step_country","FRA");
}
);
VMCountryUtil.loadCountryLabels();
}
</script>
</head>
<body onload="load_country();">
<h1>ViaMichelin - Itinary example</h1>
<p>Itinary calculation between two postal addresses</p>
<table>
<tr>
<td>
<form name="itisearch_form">
<fieldset>
<legend>Start</legend>
<label for="form_Start_address">Address:</label>
<input type="text" value="" name="form_Start_address"
id="form_Start_address"/>
<br/>
<label for="form_Start_CP">Postal Code:</label>
<input type="text" value="75001" name="form_Start_CP"
id="form_Start_CP"/>
<br/>
<label for="form_Start_city">City:</label>
<input type="text" value="" name="form_Start_city" />
<label for="form_Start_country">Country:</label>
<div id="div_country_start"></div>
</fieldset>
<br />
<fieldset>
<legend>Stop</legend>
<label for="form_Stop_address">Address:</label>
<input type="text" value="" name="form_Stop_address"
id="form_Stop_address"/>
<br/>
<label for="form_Stop_CP">Postal Code:</label>
<input type="text" value="93260" name="form_Stop_CP"
id="form_Stop_CP">
<br/>
<label for="form_Stop_city">City:</label>
<input type="text" value="" name="form_Stop_city"
id="form_Stop_city"/>
<label for="form_Stop_country">Country:</label>
<div id="div_country_stop"></div>
</fieldset>
<br/>
<fieldset>
<legend>Step</legend>
<label for="form_Step_address">Address:</label>
<input type="text" value="" name="form_Step_address"
id="form_Step_address"/>
<br/>
<label for="form_Step_CP">Postal Code:</label>
<input type="text" value="" name="form_Step_CP"
id="form_Step_CP"/>
<br/>
<label for="form_Step_city">City:</label>
<input type="text" value="" name="form_Step_city"
id="form_Step_city"/>
<label for="form_Step_country">Country:</label>
<div id="div_country_step"></div>
</fieldset>
<br/>
<fieldset>
<legend>Options</legend>
<label for="form_Type">Itinary type</label>
<select name="form_Type" id="form_Type">
<option value="0">Recommended by Michelin</option>
<option value="1">Shortest</option>
<option value="2">Quickest</option>
<option value="3">Economical</option>
<option value="4">Scenic</option>
<option value="5">On foot</option>
<option value="6">By bike</option>
</select>
<br/>
<div id="option_type">
<label for="form_Vh">Vehicle type:</label>
<select name="form_Vh" id="form_Vh">
<option value="0" selected>Automobile</option>
<option value="1">Motorcycle</option>
<option value="2">Caravan</option>
</select>
<br/>
<label for="form_Cat">Vehicle category:</label>
<select name="form_Cat" id="form_Cat">
<option value="0" selected>Hatchback</option>
<option value="1">Compact</option>
<option value="2">Family</option>
<option value="3">Sedan</option>
<option value="4">Luxury</option>
</select>
<br />
<label for="form_Carb">Fuel type</label>
<select name="form_Carb" id="form_Carb">
<option value="0" selected>Petrol</option>
<option value="1">Diesel</option>
<option value="2">LPG</option>
</select>
<br />
<label for="form_Prix">Fuel cost (euros) :</label>
<input type="text" value="1.1" name="form_Prix" size="5" />
</div>
</fieldset>
<br />
<input type="button" value="Search"
onclick="search_start_location();" />
</form>
</td>
<td class="result">
<div id="result_action" style="display:none">
<input type="button" value="Display itinary map"
onclick="display_onmap();" />
<input type="button" value="Diplay itinary details"
onclick="display_roadsheet();"/>
<input type="button" value="Display itinary resume"
onclick="display_informations();">
</div>
<div id="yourmapdiv" class="map"></div>
<div id="youritiresumediv"
style="display:none; width:500px; border: 1px dotted #90EE90; position:relative; margin-top: 5px; overflow: auto;padding: 3px 3px 3px 3px; margin-top: 4px;"></div>
<div id="youritidiv"
style="display:none;width:600px; height:400px; border: 1px dashed Purple; position:relative; margin-top: 5px;overflow: auto;padding: 3px 3px 3px 3px; margin-top: 4px;"></div>
</td>
</tr>
</table>
</body>
</html>
Documentation
