ViaMichelin - JavaScript API V1 - Examples (Deprecated)
Available examples
Using ViaMichelin JavaScript API
<head> <!-- Loading the API --> <script src="http://api.viamichelin.com/apijs/js/api.js"></script> <!-- Register --> <script>VMAPI.registerKey("JSBS20070201123465789");</script> </head>
To define language (roadmap, weather, POI search)
fra : Frenchgbr : English (default value)
deu : German
ita : Italian
esp : Spanish
nld : Dutch
VMAPI.setLanguage("gbr");
Create a map
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>ViaMichelin JavaScript 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");
function affiche() {
/* Create and display an VMMap object */
map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(-1.5748547260234285,43.47228979932601),10);
map.showMapTools();
}
</script>
</head>
<!-- Automatic script launch, after the page loading -->
<body onload="affiche()">
<h1>ViaMichelin - Map example</h1>
<p>
Display a map in the page
</p>
<div id="yourmapdiv" style="width:400px; height:320px"></div>
</body>
</html>
Related documentation
Geocoding
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ViaMichelin JavaScript 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");
/* Ask the server the geocoding */
function geocoder_search(){
geocoder = new VMGeocoder();
myaddress = new VMAddress();
var elements_formulaire =
document.forms['geocoder_form'].elements;
myaddress.address = elements_formulaire['form_address'].value;
myaddress.zipCode = elements_formulaire['form_CP'].value;
myaddress.city = elements_formulaire['form_city'].value;
myaddress.countryVMCode = elements_formulaire['country'].value;
geocoder.addEventHandler("onCallBack",display_result);
geocoder.search(myaddress);
}
/* Function called after the server response */
function display_result(){
alert("Le code est "+geocoder.result);
}
/* Display the countries list */
function load_country(){
VMCountryUtil.addEventHandler(
"onCallBack",
function(){
document.getElementById("div_country").innerHTML
= VMCountryUtil.getSelectHTMLString("country","FRA");
}
);
VMCountryUtil.loadCountryLabels();
}
</script>
</head>
<!-- Automatic script launch, after the page loading -->
<body onload="load_country()">
<h1>ViaMichelin - Geocoding example</h1>
<p>
Transform an postal address into a geographical point
</p>
<form name="geocoder_form">
<label for="form_address">Address:</label>
<input type="text" value="Place des Carmes-D�chaux"
name="form_address" id="form_adress"/>
<br />
<label for="form_CP">Postal Code:</label>
<input type="text" value="63040" name="form_CP" id="form_CP"/>
<br />
<label for="form_city">City:</label>
<input type="text" value="CLERMONT-FERRAND"
name="form_city" id="form_city"/>
<br />
<label for="form_country">Country:</label>
<div id="div_country"></div>
<br />
<input type="button" value="Start"
onclick="geocoder_search();">
</form>
</body>
</html>
Related documentation
Remove ambiguity on an address
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>ViaMichelin JavaScript 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");
/* Setting and launching the search */
function geocoder_search(){
geosearch = new VMGeoSearch();
myaddress = new VMAddress();
var elements_formulaire = document.forms['geocoder_form'].elements;
var element_pays = elements_formulaire['country'];
myaddress.address = elements_formulaire['form_address'].value;
myaddress.zipCode = elements_formulaire['form_CP'].value;
myaddress.city = elements_formulaire['form_city'].value;
if(typeof(element_pays)!="undefined"){
myaddress.countryVMCode = element_pays.value;
} else {
myaddress.countryVMCode = "FRA";
}
geosearch.addEventHandler("onCallBack",display_result);
geosearch.search(myaddress);
}
/* Server gave an adress list */
function display_result(){
var tmp = "";
if (geosearch.results.length == 0){
alert("Aucun r�sultat !")
} else {
for (var i=0; i<geosearch.results.length; i++){
tmp += "<p> "+ i
+ " | Longitude : "
+ geosearch.results[i].coords.lon
+ " Latitude : "
+ geosearch.results[i].coords.lat
+ " | <strong>"
+geosearch.results[i].VMAmbiguityLine
+"</strong>"
+ " </p>";
}
document.getElementById("yourhtmldiv").innerHTML = tmp;
}
}
/* Display the countries list */
function load_country(){
VMCountryUtil.addEventHandler(
"onCallBack",
function(){
document.getElementById("div_country").innerHTML
= VMCountryUtil.getSelectHTMLString("country","FRA");
}
);
VMCountryUtil.loadCountryLabels();
}
</script>
</head>
<!-- Automatic script launch, after the page loading -->
<body onload="load_country()">
<h1>Removing ambiguity - example</h1>
<p>
What address is the user looking for ?
</p>
<form name="geocoder_form">
<label for="form_adress">Address:</label>
<input type="text" value="Place des Carmes-D�chaux"
id="form_address" name="form_address"/>
<br/>
<label for="form_CP">Postal Code:</label>
<input type="text" value="63040" name="form_CP" id="form_CP"/>
<br/>
<label for="form_city">City:</label>
<input type="text" value="CLERMONT-FERRAND"
name="form_city" id="form_city"/>
<br/>
<label for="country">Country:</label>
<div id="div_country"></div>
<input type="button" value="Search"
onclick="geocoder_search();"/>
<div id="yourhtmldiv"></div>
</form>
</body>
</html>
Related documentation
Create a country list
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>ViaMichelin JavaScript API</title>
<!-- ViaMichelin Libraries -->
<script src="http://api.viamichelin.com/apijs/js/api.js"
type="text/javascript"></script>
<!-- Javascript code to display the map -->
<script type="text/javascript">
/* Register key, and user language */
VMAPI.registerKey("JSBS20070201123465789");
VMAPI.setLanguage("fra");
/* Display the countries list */
function load_country(){
VMCountryUtil.addEventHandler("onCallBack",function(){
document.getElementById("div_country").innerHTML =
VMCountryUtil.getSelectHTMLString("country","FRA");
});
VMCountryUtil.loadCountryLabels();
}
</script>
</head>
<!-- Automatic script launch, after the page loading -->
<body onload="load_country()">
<h1>ViaMichelin - Countries list example</h1>
<p>
Display countries list
</p>
<label for="country">Country</label>
<div id="div_country"></div>
</body>
</html>
Related documentation
Hotel search
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>ViaMichelin JavaScript 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");
/* Search a hotel */
function geocoder_search(){
document.getElementById("div_reco").style.display = "none";
geosearch = new VMGeoSearch();
myaddress = new VMAddress();
var elements_formulaire =
document.forms['geocoder_form'].elements;
myaddress.address = elements_formulaire['form_address'].value;
myaddress.zipCode = elements_formulaire['form_CP'].value;
myaddress.city = elements_formulaire['form_city'].value;
myaddress.countryVMCode = elements_formulaire['country'].value;
/* What method will be called by the server response */
geosearch.addEventHandler("onCallBack",display_ambiguity);
/* Launch the search */
geosearch.search(myaddress);
}
/* What method will be called by the server response */
function display_ambiguity(){
if (geosearch.results.length > 1){
var elements_formulaire =
document.forms['geocoder_form'].elements;
for (var i=elements_formulaire.options.length;i>=0;i--){
elements_formulaire['result_reco'].options[i] = null;
}
for (var j=0;j<geosearch.results.length;j++){
elements_formulaire['result_reco'].options[j] =
new Option(geosearch.results[j].VMAmbiguityLine,j);
}
document.getElementById("div_reco").style.display = "";
} else {
document.getElementById("div_reco").style.display = "none";
hotel_definition(0);
}
}
function hotel_definition(idx){
index = idx;
poiDefinition = new VMPOIDefinition();
poiDefinition.addEventHandler("onCallBack", hotel_search);
poiDefinition.getHotelsDefiniton();
}
function hotel_search(){
myPOIsearch = new VMPOISearch(poiDefinition);
myPOIsearch.addEventHandler("onCallBack", hotel_result);
myPOIsearch.searchHotels(geosearch.results[index].coords);
}
/* The function is called when the server returns a result list */
function hotel_result(){
if (myPOIsearch.result.VMPOIs.length > 0){
myPOIlist = myPOIsearch.result;
document.getElementById("yourmapdiv").innerHTML = "";
map = new VMMap(document.getElementById("yourmapdiv"));
myPOIlistlayer = myPOIlist.getLayer();
map.addLayer(myPOIlistlayer);
map.drawMapFromLayers();
document.getElementById("yourhtmldiv").innerHTML =
myPOIlist.getHTML();
} else {
alert("Aucun h�tel trouv�");
}
}
/* Display the countries list */
function load_country(){
VMCountryUtil.addEventHandler(
"onCallBack",
function(){
document.getElementById("div_country").innerHTML
= VMCountryUtil.getSelectHTMLString("country","FRA");
}
);
VMCountryUtil.loadCountryLabels();
}
</script>
</head>
<!-- Automatic script launch, after the page loading -->
<body onload="load_country()">
<h1>ViaMichelin - Hotels search</h1>
<p>
Search hotels next to a postal address
</p>
<form name="geocoder_form">
<label for="form_address">Address:</label>
<input type="text" value=""
name="form_address" id="form_adress">
<br />
<label for="form_CP">Postal Code:</label>
<input type="text" value="" name="form_CP" id="form_CP"/>
<br />
<label for="form_city">City:</label>
<input type="text" value="CLERMONT-FERRAND"
name="form_city" id="form_city"/>
<br />
<label for="form_country">Country:</label>
<div id="div_country"></div>
<br />
<input type="button" value="Search"
onclick="geocoder_search();"/>
<div id="div_reco" style="display:none">
Choisissez l'emplacement :
<select name="result_reco">
</select>
<input type="button" value="Display" name="makeReco"
onclick="hotel_definition(document.forms['geocoder_form'].elements['result_reco'].selectedIndex);"/>
</div>
</form>
<div id="yourmapdiv"
style="width:400px; height:320px;width:490px;height:300px; border: 1px solid Navy;"></div>
<br/>
<div id="yourhtmldiv"
style="width:400px; height:320px;border: 1px dashed Purple; margin-top: 5px; overflow: auto; background-color: #C2D2F8;"></div>
</body>
</html>
Related documentation
POI proximity search
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>ViaMichelin JavaScript 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");
/* From address to geographical point */
function geocoder_search(){
document.getElementById("div_reco").style.display = "none";
geosearch = new VMGeoSearch();
myaddress = new VMAddress();
var elements_formulaire = document.forms['geocoder_form'].elements;
myaddress.address = elements_formulaire['form_address'].value;
myaddress.zipCode = elements_formulaire['form_CP'].value;
myaddress.city = elements_formulaire['form_city'].value;
myaddress.countryVMCode = elements_formulaire['country'].value;
geosearch.addEventHandler("onCallBack",display_ambiguity);
geosearch.search(myaddress);
}
/* Manage ambiguity */
function display_ambiguity(){
if (geosearch.results.length > 1){
for (var i=document.forms['geocoder_form'].elements['result_reco'].options.length;i>=0;i--){
document.forms['geocoder_form'].elements['result_reco'].options[i]
= null;
}
for (var j=0;j<geosearch.results.length;j++){
document.forms['geocoder_form'].elements['result_reco'].options[j]
= new Option(geosearch.results[j].VMAmbiguityLine,j);
}
document.getElementById("div_reco").style.display = "";
} else {
document.getElementById("div_reco").style.display = "none";
poi_definition(0);
}
}
/* Point Of Interest definition */
function poi_definition(idx){
index = idx;
poiDefinition = new VMPOIDefinition();
poiDefinition.addEventHandler("onCallBack",poi_search);
poiDefinition.getDefiniton("113981");
}
/* With the location, and the POI type, we can start the search */
function poi_search(){
myPOIsearch = new VMPOISearch(poiDefinition);
myPOIsearch.addEventHandler("onCallBack",poi_result);
myPOIsearch.search(geosearch.results[index].coords);
}
/* Affichage des réponses fournies par le serveur */
function poi_result(){
if (myPOIsearch.result.VMPOIs.length > 0){
myPOIlist = myPOIsearch.result;
document.getElementById("yourmapdiv").innerHTML = "";
map = new VMMap(document.getElementById("yourmapdiv"));
for (i=0;i<myPOIsearch.result.VMPOIs.length;i++){
var myPOIlayer;
poiHTML = "<div style='width:200px'><strong>"+myPOIsearch.result.VMPOIs[i].name+"</strong><br>";
poiHTML += "<br>"+myPOIsearch.result.VMPOIs[i].displayAddress;
poiHTML += "<br>icone : "+myPOIsearch.result.VMPOIs[i].iconsId[0];
j=0;
iconsHTML = "";
while (j < myPOIsearch.result.VMPOIs[i].metaNums.length){
if ((myPOIsearch.result.VMPOIs[i].definition.getCriteriaByNum(j+1))
&&(myPOIsearch.result.VMPOIs[i].definition.getCriteriaByNum(j+1).isDisplay)
&& (myPOIsearch.result.VMPOIs[i].definition.getCriteriaByNum(j+1).type == 0)
&& (myPOIsearch.result.VMPOIs[i].metaNums[j] != 0)){
iconsHTML += "<img src='/viamichelin/client_data/TEST_FO/113981/"+myPOIsearch.result.VMPOIs[i].definition.language+"/images/"+myPOIsearch.result.VMPOIs[i].definition.getCriteriaByNum(j+1).number+"_"+myPOIsearch.result.VMPOIs[i].metaNums[j]+".gif' align='absmiddle' title='"+myPOIsearch.result.VMPOIs[i].definition.getCriteriaByNum(j+1).getLibValue(myPOIsearch.result.VMPOIs[i].metaNums[j])+"'/> ";
}
j++;
}
poiHTML += "<br>"+iconsHTML;
poiHTML += "</div>";
myPOIlayer = myPOIsearch.result.VMPOIs[i].getLayer();
myPOIlayer.setExpandLayer(poiHTML);
map.addLayer(myPOIlayer);
}
map.drawMapFromLayers();
map.showMapTools(0);
document.getElementById("yourhtmldiv").innerHTML = myPOIlist.getHTML();
} else {
alert("No POI found");
}
}
/* Display the country list */
function load_country(){
VMCountryUtil.addEventHandler(
"onCallBack",
function(){
document.getElementById("div_country").innerHTML
= VMCountryUtil.getSelectHTMLString("country","FRA");
}
);
VMCountryUtil.loadCountryLabels();
}
</script>
</head>
<!-- Automatic script launch, after the page loading -->
<body onload="load_country()">
<h1>ViaMichelin - Proximity search example</h1>
<p>Find POI next to a postal address</p>
<form name="geocoder_form">
<label for="form_address">Address:</label>
<input type="text" value="Place des Carmes-D�chaux"
name="form_address" id="form_adress"/>
<br />
<label for="form_CP">Postal Code:</label>
<input type="text" value="63040" name="form_CP" id="form_CP"/>
<br />
<label for="form_city">City:</label>
<input type="text" value="CLERMONT-FERRAND" name="form_city" id="form_city"/>
<br />
<label for="form_country">Country:</label>
<div id="div_country"></div>
<br />
<input type="button" value="Search" onclick="geocoder_search();">
<div id="div_reco" style="display:none">
Choose the location:
<select name="result_reco"></select>
<input type="button" value="Display" name="makeReco"
onclick="poi_definition(document.forms['geocoder_form'].elements['result_reco'].selectedIndex);"/>
</div>
</form>
<div id="yourmapdiv"
style="width:400px; height:320px;width:490px;height:300px; border: 1px solid Navy;"></div>
<br>
<div id="yourhtmldiv"
style="width:400px; height:320px;border: 1px dashed Purple; margin-top: 5px; overflow: auto; background-color: #C2D2F8;"></div>
</body>
</html>
Related documentation
Compute the best route
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>ViaMichelin JavaScript 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>
Calculate a Distance Matrix
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>ViaMichelin JavaScript 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("gbr"); /* The array that will contains the different addresses */ var addresses = new Array(); var index = 0; var address = new VMAddress(); address.city = "Cannes"; address.countryISOCode = "FRA"; addresses[index] = address; index++; address = new VMAddress(); address.city = "Nice"; address.countryISOCode = "FRA"; addresses[index] = address; index++; address = new VMAddress(); address.city = "Toulon"; address.countryISOCode = "FRA"; addresses[index] = address; index++; address = new VMAddress(); address.city = "Geneva"; address.countryISOCode = "CHE"; addresses[index] = address; index++; address = new VMAddress(); address.city = "Milano"; address.countryISOCode = "ITA"; addresses[index] = address; index++; address = new VMAddress(); address.city = "Torino"; address.countryISOCode = "ITA"; addresses[index] = address; index++; var geocoders = new Array(); var itis = new Array(); var nbResults = 0; function load_matrix(){ var addressesQtt = addresses.length; var matrix = "<table border='1'><tr><td> </td>"; for(var i=0; i < addressesQtt; ++i){ matrix += "<th>" + addresses[i].city + "</th>"; } matrix += '</tr>'; for(i=0; i < addressesQtt; ++i){ matrix += "<tr><th>" + addresses[i].city + "</th>"; for(var j=0; j < addressesQtt; ++j) { matrix += "<td id='cell"+ i + j +"'> </td>"; } matrix += "</tr>"; } matrix += '</table>'; document.getElementById("result").innerHTML = matrix; for(i=0; i < addressesQtt; ++i){ launch_geocoders(addresses[i], i); } } function launch_geocoders(address, i){ geocoders[i] = new VMGeocoder(); geocoders[i].addEventHandler("onCallBack",function(){ //distance computation is launched only when all addresses are geocoded if( (++nbResults) == addresses.length ){ launch_itis(); } }); geocoders[i].search(address); } function launch_itis(){ var addressesQtt = addresses.length; for(i=0; i < (addressesQtt-1); ++i){ itis[i] = new Array(); for(var j=i; j < addressesQtt; ++j){ launch_one_iti(i,j); } } } function launch_one_iti(i,j){ itis[i][j] = new VMItinerary(); itis[i][j].addStopOver(geocoders[i].result); itis[i][j].addStopOver(geocoders[j].result); itis[i][j].addEventHandler("onCallBack", function(){ display_result(i, j); }); itis[i][j].search(); } function display_result(i, j){ var distanceKM = Math.round(itis[i][j].getTotalDistance()/1000); var timeMIN = Math.round(itis[i][j].getTotalTime()/60); var toDisplay = distanceKM + ' km<br/>' + timeMIN + ' mn'; document.getElementById('cell' + i + j).innerHTML = toDisplay; document.getElementById('cell' + j + i).innerHTML = toDisplay; } </script> </head> <body onload='load_matrix()'> <div id="result"></div> </body> </html>
Related documentation
Insert a logo on geographical coordinates
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>ViaMichelin JavaScript 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");
function initialise_adresse_et_carte(){
var map = new VMMap(document.getElementById("yourmapdiv"));
var localisation_entreprise = new VMLonLat(2.24344,48.83381);
map.drawMap(localisation_entreprise, 15);
/* Create an image object */
var image = new VMIcon('http://dev.viamichelin.fr/wswebsite/fra/img/petit_bib.gif',-12,-12);
/* Create a layout for the image */
var coucheImage = new VMIconLayer(
localisation_entreprise,
image,
"ViaMichelin"
);
/* Add the layout on the map */
map.addLayer(coucheImage);
map.showMapTools();
}
</script>
</head>
<!-- Automatic script launch, after the page loading -->
<body onload="initialise_adresse_et_carte();">
<h1>ViaMichelin - Logo example</h1>
<p>Add a logo on a map</p>
<div id="yourmapdiv" style="width:400px; height:320px"></div>
</body>
</html>
Related documentation
Read actual map coordinates
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ViaMichelin JavaScript 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");
var map;
function initialise_adresse_et_carte(){
map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(2.24344,48.83381), 15);
map.showMapTools();
}
function coordonnees(){
/* Whatever the movements on the map, the method getCenter() returns current coordinates of the map center */
alert(map.getCenter());
}
</script>
</head>
<!-- Automatic script launch, after the page loading -->
<body onload="initialise_adresse_et_carte();">
<div id="yourmapdiv" style="width: 500px; height: 500px"></div>
<input type="button" value="Coordinate calcul"
onclick="coordonnees()" />
</body>
</html>
Related documentation
GPS Personal Navigation Devices export
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ViaMichelin JavaScript 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");
function geocoder_search(){
geocoder = new VMGeocoder();
myaddress = new VMAddress();
var elements_formulaire =
document.forms['geocoder_form'].elements;
myaddress.address = elements_formulaire['form_address'].value;
myaddress.zipCode = elements_formulaire['form_CP'].value;
myaddress.city = elements_formulaire['form_city'].value;
myaddress.countryVMCode = elements_formulaire['country'].value;
geocoder.addEventHandler("onCallBack",export_function);
geocoder.search(myaddress);
}
/* Display the countries list */
function load_country(){
VMCountryUtil.addEventHandler(
"onCallBack",
function(){
document.getElementById("div_country").innerHTML
= VMCountryUtil.getSelectHTMLString("country","FRA");
}
);
VMCountryUtil.loadCountryLabels();
}
/* Export into a file */
function export_function(){
myexport = new VMExportAsXVM();
myexport.exportXVM(geocoder.result,"export_file");
}
</script>
</head>
<!-- Automatic script launch, after the page loading -->
<body onload="load_country();">
<h1>ViaMichelin - Export example</h1>
<p>Export coordinates into your GPS</p>
<form name="geocoder_form">
<label for="form_address">Adresse :</label>
<input type="text" value="Place des Carmes-D�chaux"
name="form_address" id="form_adress" />
<br />
<label for="form_CP">Code Postal :</label>
<input type="text" value="63040" name="form_CP"
id="form_CP" />
<br />
<label for="form_city">Ville :</label>
<input type="text" value="CLERMONT-FERRAND"
name="form_city" id="form_city" />
<br />
<label for="form_country">Pays :</label>
<div id="div_country"></div>
<br />
<input type="button" value="Tester" onclick="geocoder_search();">
</form>
</body>
</html>
Related documentation
Complete example, case study
- Display a map whose center is the address of a company
- Display company logo on map
- Calculate an itinary towards the company (removing the ambiguity on the starting point)
- Proximity hotel search
- GPS export of the company geographical coordinates
- Display the weather
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ViaMichelin JavaScript API</title>
<!-- ViaMichelin Libraries -->
<script src="http://api.viamichelin.com/apijs/js/api.js"
type="text/javascript"></script>
<script type="text/javascript">
/* Register key and user language */
VMAPI.registerKey("JSBS20070201123465789");
VMAPI.setLanguage("fra");
/* Company informations */
var entreprise_adresse = '110 Avenue Victor Hugo';
var entreprise_cp = 92514;
var entreprise_ville='Boulogne Billancourt';
var entreprise_pays = '1424';
var entreprise_logo =
'http://dev.viamichelin.fr/wswebsite/fra/img/petit_bib.gif';
var entreprise_logo_texte = 'ViaMichelin';
/* The map */
var map;
var carte_largeur = 500;
var carte_hauteur = 500;
/* Javascript object to transform an address into geographical coordinates */
var geocoder;
var geosearch;
var myweather;
/* Company coordinates */
var localisation_entreprise;
var localisation_from;
/* Javascript object to calculate itineraries */
var myiti;
var sanscarbu = false;
var couleur_itineraire = "#00FFFF";
/* The div tag id where to put the results */
var itidiv_id = "youritidiv";
var poidiv_id = "yourpoidiv";
var mapdiv_id = "yourmapdiv";
function initialise_adresse_et_carte(){
/* Create a tool to transform an address into geographical point */
geocoder = new VMGeocoder();
/* Create an address object */
var myaddress = new VMAddress();
myaddress.address = entreprise_adresse;
myaddress.zipCode = entreprise_cp;
myaddress.city = entreprise_ville;
myaddress.countryVMCode = entreprise_pays;
/* What method will be called by the geocoder response */
geocoder.addEventHandler("onCallBack",
initialise_carte);
/* Launch the search */
geocoder.search(myaddress);
}
/* Map init */
function initialise_carte(){
/* Create a map object, center it. Let's presume that there is no ambiguity. */
map = new VMMap(document.getElementById(mapdiv_id));
localisation_entreprise = geocoder.result;
/* Map resize */
map.addEventHandler("onCallBack", function(){
map.resizeTo(carte_largeur, carte_hauteur);
});
/* Effective map draw */
map.drawMap(localisation_entreprise, 15);
/* Allow to put tools on the map */
map.showMapTools();
var image = new VMIcon(entreprise_logo,-12,-12);
var coucheImage = new VMIconLayer(
localisation_entreprise,
image,
entreprise_logo_texte);
map.addLayer(coucheImage);
}
/* Display the countries list */
function load_country(){
VMCountryUtil.addEventHandler(
"onCallBack",
function(){
document.getElementById("div_country").innerHTML =
VMCountryUtil.getSelectHTMLString("country","FRA");
}
);
VMCountryUtil.loadCountryLabels();
}
function lance_itineraire(){
myiti = new VMItinerary();
/* Use user informations */
var from_adresse = document.getElementById("adresse").value;
var from_cp = document.getElementById("cp").value;
var from_ville = document.getElementById("ville").value;
var from_pays = document.getElementById("country").value;
/* Create an address object */
var myaddress = new VMAddress();
/* Feed the address object */
myaddress.address = from_adresse;
myaddress.zipCode = from_cp;
myaddress.city = from_ville;
myaddress.countryVMCode = from_pays;
geosearch = new VMGeoSearch();
/* What method will be called by the geosearch response */
geosearch.addEventHandler("onCallBack",calcul_from);
/* Launch the search */
geosearch.search(myaddress);
}
function calcul_from(){
if(geosearch.results.length==1){
localisation_from = geosearch.results[0].coords;
document.getElementById("maybeone").style.display = "none";
document.getElementById("maybetwo").style.display = "none";
ajout_etapes_itineraire();
} else {
var qtt = document.forms['iti_form'].elements['result_reco'].options.length;
for (var i=qtt;i>=0;i--){
document.forms['iti_form'].elements['result_reco'].options[i] = null;
}
for (var j=0;j<geosearch.results.length;j++){
document.forms['iti_form'].elements['result_reco'].options[j] =
new Option(geosearch.results[j].VMAmbiguityLine,j);
}
document.getElementById("maybeone").style.display = "block";
document.getElementById("maybetwo").style.display = "block";
}
}
function selectionner(){
var index = document.forms['iti_form'].elements['result_reco'].selectedIndex;
localisation_from = geosearch.results[index].coords;
ajout_etapes_itineraire();
document.getElementById("maybeone").style.display = "none";
document.getElementById("maybetwo").style.display = "none";
}
/* Due to asynchronous javascript communication, itinerary method is made of several functions */
function ajout_etapes_itineraire(){
/* From */
myiti.addStopOver(localisation_from);
/* To */
myiti.addStopOver(localisation_entreprise);
var form = document.getElementById("iti_form").elements;
/* Itinerary type */
for(var i=0; i<form.itinaryType.length; i++){
if(form.itinaryType[i].checked){
myiti.setItineraryType(form.itinaryType[i].value);
if(form.itinaryType[i].value==5 || form.itinaryType[i].value==6){
sanscarbu = true;
}
}
}
if(sanscarbu){
for(var i=0; i<form.itineraryVehicleType.length; i++){
if(form.itineraryVehicleType[i].checked){
myiti.setItineraryVehicleType(form.itineraryVehicleType[i].value);
}
}
if(myiti.itineraryVehicleType==0){
for(var i=0; i<form.carType.length; i++){
if(form.carType[i].checked){
myiti.setCarType(form.carType[i].value);
}
}
}
for(var i=0; i<form.fuelType.length; i++){
if(form.fuelType[i].checked){
myiti.setFuelType(form.fuelType[i].value);
}
}
myiti.setFuelCost(form.fuelCost.value);
}
/* What method will be called by the itinerary response */
myiti.addEventHandler("onCallBack", fin_itineraire);
/* Launch the search */
myiti.search();
}
/* Due to asynchronous javascript communication, itinerary method is made of several functions */
function fin_itineraire(){
document.getElementById(mapdiv_id).innerHTML = "";
/* Create a new map - Add the itinerary to the map and text page */
map = new VMMap(document.getElementById(mapdiv_id));
map.addLayer(myiti.getItiAsVMComplexLayer(couleur_itineraire,7,0.5));
map.drawMapFromLayers();
map.showMapTools();
var html = myiti.roadSheet.getHTML();
document.getElementById(itidiv_id).innerHTML = html;
if(!sanscarbu){
document.getElementById("cout_carbu").innerHTML =
myiti.getTotalGasConsumption();
} else {
document.getElementById("cout_carbu").innerHTML = 0;
}
document.getElementById("km").innerHTML =
(myiti.getTotalDistance())/1000;
}
/* Show / Hide textual result to access to the hotel search */
var itineraire_visible = true;
function cacher_itineraire(){
if(itineraire_visible){
document.getElementById(itidiv_id).style.display="none";
itineraire_visible = false;
} else {
document.getElementById(itidiv_id).style.display="block";
itineraire_visible = true;
}
}
var poiDefinition;
var myPOIsearch;
function lance_hotels(){
poiDefinition = new VMPOIDefinition();
poiDefinition.addEventHandler("onCallBack", recherche_hotels);
poiDefinition.getHotelsDefiniton();
}
function recherche_hotels(){
myPOIsearch = new VMPOISearch(poiDefinition);
myPOIsearch.addEventHandler("onCallBack", reponse_hotels);
myPOIsearch.searchHotels(localisation_entreprise);
}
function reponse_hotels(){
if (myPOIsearch.result.VMPOIs.length > 0){
myPOIlist = myPOIsearch.result;
myPOIlistlayer = myPOIlist.getLayer();
map.addLayer(myPOIlistlayer);
document.getElementById(poidiv_id).innerHTML = myPOIlist.getHTML();
} else {
document.getElementById(poidiv_id).innerHTML = "Aucun hôtel";
}
}
/* Show / Hide textual result */
var hotels_visible = true;
function cacher_hotels(){
var poidiv = document.getElementById(poidiv_id);
if(hotels_visible){
poidiv.style.display="none";
hotels_visible = false;
} else {
poidiv.style.display="block";
hotels_visible = true;
}
}
function export_function(){
myexport = new VMExportAsXVM();
myexport.exportXVM(localisation_entreprise,"export_file");
}
function meteo(){
myweather = new VMWeatherSearch();
myweather.searchCoords = localisation_entreprise;
myweather.addEventHandler("onCallBack", meteo_display);
myweather.getTodayWeather();
}
function meteo_ligne_entete(isToday){
var str = "<tr>"
+ "<th>Date</th>"
+ "<th>Ensoleillement</th>";
if(!isToday){
str += "<th>Température minimale</th>"
+ "<th>Température maximale</th>";
} else {
str+= "<th>Température mesurée</th>"
+ "<th>Vent</th>"
+ "<th>Humidité</th>"
+ "<th>Visibilité</th>";
}
str+="</tr>";
return str;
}
function meteo_create(meteo_result, isToday){
var str =
"<tr>"
+ "<td>" + meteo_result.dayOfReport + "</td>"
+ "<td> <img src='"+meteo_result.image+"' alt='"
+meteo_result.imageLabel+"'/></td>";
if (!isToday) {
str+= "<td>" + meteo_result.temperatureMinInfo+"°C </td>"
+ "<td>" + meteo_result.temperatureMaxInfo+"°C </td>";
} else {
str+= "<td>" + meteo_result.temperatureMesured+"°C </td>"
+ "<td>" + meteo_result.windDirectionInfo +" "
+ meteo_result.windSpeedInfo+"km/h</td>"
+ "<td>" + meteo_result.humidityInfo+"%</td>"
+ "<td>" + meteo_result.visibilityInfo+"m" + "</td>";
}
str+="</tr>";
return str;
}
function meteo_display(){
var str = "<table style=\"width:600px;\" border=\"1\">"
+ meteo_ligne_entete(true)
+ meteo_create(myweather.result.todayWeather, true)
+ "<caption>Station météo : "
+ myweather.result.weatherStation
+ "</caption>"
+ "</table>";
document.getElementById("yourmeteodiv").innerHTML = str;
}
function meteo_demain(){
myweather = new VMWeatherSearch();
myweather.searchCoords = localisation_entreprise;
myweather.addEventHandler("onCallBack",meteo_demain_display);
myweather.getForecastWeather();
}
function meteo_demain_display(){
var str = "<table style=\"width:500px;\" border=\"1\">"
+ meteo_ligne_entete(false);
for(var i=0; i<myweather.result.forecasts.length; i++){
str+= meteo_create(myweather.result.forecasts[i], false);
}
str +="<caption>Station météo : "
+ myweather.result.weatherStation
+ "</caption>"
+ "</table>";
document.getElementById("yourmeteodiv").innerHTML = str;
}
</script>
</head>
<!-- Automatic script launch, after the page loading -->
<body onload="initialise_adresse_et_carte(); load_country();">
<h1>ViaMichelin - Complete example</h1>
<p>Case study</p>
<ul>
<li>Display a map whose center is the address of a company</li>
<li>Display company logo on map</li>
<li>Calculate an itinerary towards the company (removing the ambiguity on the starting point)</li>
<li>Proximity hotel search</li>
<li>GPS export of the company geographical coordinates</li>
<li>Display the weather</li>
</ul>
<div id="yourmapdiv" style="width: 500px; height: 500px"></div>
<input type="button" onclick="export_function()"
value="GPS export" />
<input type="button" onclick="meteo()"
value="Weather data display" />
<input type="button" onclick="meteo_demain()"
value="Estimated weather data display" />
<div id="yourmeteodiv"></div>
<form id="iti_form">
<fieldset>
<legend>
itinerary to the company
</legend>
<table>
<tr>
<th><label for="adresse">Address</label></th>
<td>
<input type="text" name="adresse" id="adresse" value="carnot" />
</td>
<th>
<label for="cp">Postal Code</label>
</th>
<td>
<input type="text" name="cp" id="cp" value="45400" />
</td>
</tr>
<tr>
<th><label for="ville">City</label></th>
<td>
<input type="text" name="ville" id="ville" value="" />
</td>
<th><label for="country">Country</label></th>
<td colspan="3">
<div id="div_country"></div>
</td>
</tr>
<tr>
<th id="maybeone" style="display: none">
<label for="result_reco">
Start point
</label>
</th>
<td id="maybetwo" style="display: none" colspan="3">
<select id="result_reco" name="result_reco"></select>
<input type="button" onclick="selectionner()"
value="Select" />
</td>
</tr>
<tr>
<th>itinerary type</th>
<td class="inline" colspan="3">
<input type="radio" name="itinaryType" value="0"
checked="checked" id="itinaryType_0" />
<label for="itinaryType_0">Recommended by Michelin</label>
<input type="radio" name="itinaryType" value="1"
id="itinaryType_1" />
<label for="itinaryType_1">Shortest</label>
<input type="radio" name="itinaryType" value="2"
id="itinaryType_2" />
<label for="itinaryType_2">Quickest</label>
<input type="radio" name="itinaryType" value="3"
id="itinaryType_3" />
<label for="itinaryType_3">Economical</label>
<input type="radio" name="itinaryType" value="4"
id="itinaryType_4" />
<label for="itinaryType_4">Scenic</label>
<input type="radio" name="itinaryType" value="5"
id="itinaryType_5" />
<label for="itinaryType_5">On foot</label>
<input type="radio" name="itinaryType" value="6"
id="itinaryType_6" />
<label for="itinaryType_6">By bike</label>
</td>
</tr>
<tr>
<th>Vehicle type</th>
<td class="inline" colspan="3">
<input type="radio" name="itineraryVehicleType"
id="itineraryVehicleType_0" value="0" checked="checked" />
<label for="itineraryVehicleType_0">Automobile</label>
<input type="radio" name="itineraryVehicleType" value="1"
id="itineraryVehicleType_1" />
<label for="itineraryVehicleType_1">Motorcycle</label>
<input type="radio" name="itineraryVehicleType" value="2"
id="itineraryVehicleType_2" />
<label for="itineraryVehicleType_2">Caravan</label>
</td>
</tr>
<tr>
<th>Vehicle category</th>
<td colspan="3" class="inline">
<input type="radio" name="carType" value="0"
checked="checked" id="carType_0" />
<label for="carType_0">Hatchback</label>
<input type="radio" name="carType" value="1"
id="carType_1" />
<label for="carType_1">Compact</label>
<input type="radio" name="carType" value="2"
id="carType_2" />
<label for="carType_2">Family</label>
<input type="radio" name="carType" value="3"
id="carType_3" />
<label for="carType_3">Sedan</label>
<input type="radio" name="carType" value="4"
id="carType_4" />
<label for="carType_4">Luxury</label>
</td>
</tr>
<tr>
<th>Fuel type</th>
<td colspan="3" class="inline">
<input type="radio" name="fuelType"
value="0" checked="checked" id="fuelType_0" />
<label for="fuelType_0">Petrol</label>
<input type="radio" name="fuelType"
value="1" id="fuelType_1" />
<label for="fuelType_1">Diesel</label>
<input type="radio" name="fuelType"
value="2" id="fuelType_2" />
<label for="fuelType_2">LPG</label>
</td>
</tr>
<tr>
<th><label for="fuelCost">Fuel cost</label>
</th>
<td colspan="3">
<input type="text" name="fuelCost"
id="fuelCost" value="1.1" />
</td>
</tr>
<tr>
<th></th>
<td colspan="3">
<input type="button" onclick="lance_itineraire();"
value="Search" />
<input type="button" id="cacher" onclick="cacher_itineraire();"
value="Show/Hide the itinerary" />
</td>
</tr>
</table>
<p>Distance : <span id="km"></span> km
- Fuel cost <span id="cout_carbu"></span> €
</p>
</fieldset>
</form>
<div id="youritidiv"></div>
<form>
<fieldset>
<legend>
Looking for a hotel next to the company
</legend>
<input type="button" onclick="lance_hotels();"
value="Search" />
<input type="button" id="cacher" onclick="cacher_hotels();"
value="Show/Hide hotels list" /
</fieldset>
</form>
<div id="yourpoidiv" style="display: block"></div>
</body>
</html>
