Itineraries examples

Calculate an Itinerary

Voir l'exemple 
<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">
 /* Insert your key */
 VMAPI.registerKey("JSBS20070201123465789");
 VMAPI.setLanguage("fra");
 
 /* Transform user start address into a geographical point */
 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);
 }
 
 /* Transform user stop address into a geographical point */
 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);
 }
 
 /* Transform user step address into a geographical point */
 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();
 }
 }
 
 /* Itinary search configuration */
 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 = '';
 }
 
 /* Display itinary as a text */
 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');
 }
 }
 
 /* Display itinary on the map */
 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');
 } 
 }
 
 /* Display some itinary informations */
 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;
 }
 
 /* Display the countries list */
 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>
 
 <!-- Automatic script launch, after the page loading -->
 <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