ViaMichelin - JavaScript API V1 - Exemples (Déprécié)

Exemples disponibles

Appels à ViaMichelin JavaScript API

<head>
    <!-- Chargement de l'API -->
    <script src="http://api.viamichelin.com/apijs/js/api.js"></script>
    <!-- Enregistrement -->
    <script>VMAPI.registerKey("JSBS20070201123465789");</script>
</head>

Définir une langue (pour la feuille de route, la météo, la recherche de POI)

fra : Français
gbr : Anglais (Valeur par défaut)
deu : Allemand
ita : Italien
esp : Espagnol
nld : Néerlandais

VMAPI.setLanguage("gbr");

Créer une carte

<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">
      /* Insérez ici votre clé */
      VMAPI.registerKey("JSBS20070201123465789");
      VMAPI.setLanguage("fra");
      function affiche() {
        /* Création et affichage dans la page d'un objet VMMap */
        map = new VMMap(document.getElementById("yourmapdiv"));
        map.drawMap(new VMLonLat(-1.5748547260234285,43.47228979932601),10);
        map.showMapTools();
      }
    </script>
  </head>
  
  <!-- Lancement automatique du script javascript après le chargement de la page -->
  <body onload="affiche()">
      <h1>ViaMichelin - Exemple de carte</h1>
      <p>
          Afficher une carte dans la page
      </p>
    <div id="yourmapdiv" style="width:400px; height:320px"></div>
   
  </body>
</html>

Documentation associée

Faire un géocodage

<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">
         /* Insérez ici votre clé */
         VMAPI.registerKey("JSBS20070201123465789");
         VMAPI.setLanguage("fra");
         
         /* La fonction qui demandera au serveur le géocodage */
         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);
         }
         
         /* La fonction lancée après la réponse du server */
         function display_result(){
            alert("Le code est "+geocoder.result);
         }
         
         /* L'affichage de la liste des pays */
         function load_country(){
            VMCountryUtil.addEventHandler(
                  "onCallBack",
                  function(){
                      document.getElementById("div_country").innerHTML 
                       = VMCountryUtil.getSelectHTMLString("country","FRA");
                     }
                  );
               VMCountryUtil.loadCountryLabels();
           }
      </script>
   </head>
   
   <!-- Lancement automatique du script javascript après le chargement de la page -->
   <body onload="load_country()">
      <h1>ViaMichelin - Exemple de géocodage</h1>
      <p>
         Trouver l'emplacement géographique d'une adresse postale
      </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="Lancer le calcul du géocodage" 
         onclick="geocoder_search();">
      </form>
   </body>
</html>

Documentation associée

Faire une levée d'ambiguïté sur une adresse

<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">
    
    /* Insérez ici votre clé */
      VMAPI.registerKey("JSBS20070201123465789");
      VMAPI.setLanguage("fra");

    /* Paramétrage et lancement de la recherche */
    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);
    }
    
    /* Le serveur a donné une liste d'adresses */
    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;
        }
    }
    
    /* L'affichage de la liste des pays */
    function load_country(){
        VMCountryUtil.addEventHandler(
            "onCallBack",
             function(){
                   document.getElementById("div_country").innerHTML 
                       = VMCountryUtil.getSelectHTMLString("country","FRA");
                 }
             );
         VMCountryUtil.loadCountryLabels();
    }
   </script>
  </head>
  
  <!-- Lancement automatique du script javascript après le chargement de la page -->
  <body onload="load_country()">
      <h1>Exemple de levée d'ambiguïté</h1>
      <p>
          Déterminer quelle est l'adresse que cherche l'utilisateur
      </p>
  
    <form name="geocoder_form">
        <label for="form_adress">Adresse :</label>
        <input type="text" value="Place des Carmes-D�chaux" 
            id="form_address" name="form_address"/>
        
        <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="country">Pays :</label>
        <div id="div_country"></div>
        
        <input type="button" value="Lancer la recherche" 
            onclick="geocoder_search();"/>
        
        <div id="yourhtmldiv"></div>
    </form>
  </body>
</html>

Documentation associée

Créer une liste de pays

<!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>

        <!-- Code Javascript qui va afficher la carte -->        
         <script type="text/javascript">
             /* Clef d'enregistrement et langue de l'utilisateur */
             VMAPI.registerKey("JSBS20070201123465789");
             VMAPI.setLanguage("fra");
            
            /* L'affichage de la liste des pays */
            function load_country(){
                VMCountryUtil.addEventHandler("onCallBack",function(){
                    document.getElementById("div_country").innerHTML = 
                        VMCountryUtil.getSelectHTMLString("country","FRA");
                });
                VMCountryUtil.loadCountryLabels();
            }
        </script>
    </head>

    <!-- Lancement automatique du script javascript après le chargement de la page -->
    <body onload="load_country()">
        <h1>ViaMichelin - Exemple de liste de pays</h1>
        <p>
            Afficher la liste des pays sélectionnables
        </p>
    
        <label for="country">Pays</label>
        <div id="div_country"></div>
    </body>
</html>

Documentation associée

VMCountryUtil

Faire une recherche d'hôtel

<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">
            /* Insérez ici votre clé */
            VMAPI.registerKey("JSBS20070201123465789");
            VMAPI.setLanguage("fra");
               
            /* Lancer une recherche d'hôtel */
            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;
                
                /* Définir la fonction à appeler lors de la réponse du serveur */
                geosearch.addEventHandler("onCallBack",display_ambiguity);
                /* Lancer la recherche effective */
                geosearch.search(myaddress);
            }
            
            /* La fonction est appelée lors de la réponse du serveur */
            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);
            }
            
            /* La fonction est appelée lorsque le serveur nous renvoit une liste d'hôtels */
            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�");
                }
            }
            
            /* L'affichage de la liste des pays */
            function load_country(){
                VMCountryUtil.addEventHandler(
                    "onCallBack",
                    function(){
                        document.getElementById("div_country").innerHTML 
                        = VMCountryUtil.getSelectHTMLString("country","FRA");
                    }
                );
                VMCountryUtil.loadCountryLabels();
            }
        </script>
  </head>
  
  <!-- Lancement automatique du script javascript après le chargement de la page -->
  <body onload="load_country()">
    <h1>ViaMichelin - Recherche d'hôtels</h1>
    <p>
        Rechercher les hôtels à proximité d'une adresse postale
    </p>

    <form name="geocoder_form">
         <label for="form_address">Adresse :</label>
        <input type="text" value="" 
            name="form_address" id="form_adress">
        
        <br />
        
        <label for="form_CP">Code Postal :</label>
        <input type="text" value="" 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="Lancer la recherche" 
            onclick="geocoder_search();"/>
        <div id="div_reco" style="display:none">
                Choisissez l'emplacement :
                <select name="result_reco">
                </select>
                <input type="button" value="Afficher" 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>

Documentation associée

Faire une recherche de proximité

<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">
            /* Insérez ici votre clé */
            VMAPI.registerKey("JSBS20070201123465789");
            VMAPI.setLanguage("fra");
            
            /* Transformer l'adresse en un point géolocalisé */
            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);
            }
            
            /* Gérer l'ambiguïté */
            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);
                }
            }
            
            /* Définition du type de point d'intérêt à chercher */
            function poi_definition(idx){
                index = idx;
                poiDefinition = new VMPOIDefinition();
                poiDefinition.addEventHandler("onCallBack",poi_search);
                poiDefinition.getDefiniton("113981");
            }
            
            /* On connaît le lieu et le type de point d'intérêt, on lance la recherche */
            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");
            }
            
            }
            
            /* L'affichage de la liste des pays */
            function load_country(){
                VMCountryUtil.addEventHandler(
                    "onCallBack",
                    function(){
                        document.getElementById("div_country").innerHTML 
                            = VMCountryUtil.getSelectHTMLString("country","FRA");
                }
            );
            VMCountryUtil.loadCountryLabels();
            }
        </script>
    </head>
    
    <!--  -->
    <body onload="load_country()">
        <h1>ViaMichelin - Exemple de recherche de proximité</h1>
        <p>Trouver les points d'intérêts proches d'une adresse postale</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="Search" onclick="geocoder_search();">
            <div id="div_reco" style="display:none">
               Choisissez un emplacement :
                <select name="result_reco"></select>
                <input type="button" value="Afficher" 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>

Documentation associée

Faire un calcul d'itinéraire

<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">
         /* Insérez ici votre clé */
         VMAPI.registerKey("JSBS20070201123465789");
         VMAPI.setLanguage("fra");
         
         /* Transformer l'adresse de départ, donnée par l'utilisateur, en un point géocodé */
         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);
         }
         
          /* Transformer l'adresse d'arrivée, donnée par l'utilisateur, en un point géocodé */
         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);
         }
         
         /* Transformer l'étape, donnée par l'utilisateur, en un point géocodé */
         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();
            }
         }
         
         /* Configurer la recherche d'itinéraire */
         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('Itineraire trouvé');
            document.getElementById('result_action').style.display = '';
         }
         
         /* Affichage de l'itinéraire sous forme de texte */
         function display_roadsheet(){
            if (typeof(myiti)!="undefined"){
               document.getElementById('youritidiv').innerHTML = myiti.roadSheet.getHTML(mymap);
               document.getElementById('youritidiv').style.display = '';
            } else {
               alert('Aucun itinéraire chargé');
            }
         }
         
         /* Affichage de l'itinéraire sur la carte */
         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('Aucun itinéraire chargé');
            }      
         }
         
         /* Affichage de quelques informations concernant l'itinéraire */
         function display_informations(){
            strHTML =
                    "Distance totale en mêtres :"
                    +myiti.getTotalDistance()+"m<br>"
                    + "Distance parcourue sur autoroute : "
                    +myiti.getDistanceOnMotorway()+"m<br>"
                    + "Temps total en secondes : "
                    +myiti.getTotalTime()+"s<br>"
                    + "Temps de parcours sur autoroute : "
                    +myiti.getTimeOnMotorway()+"s<br>"
                    + "Coût consommation carburant :"
                    +myiti.getTotalGasConsumption()+"€<br>"
                    + "Coût péage autoroute : "
                    +myiti.getTollCost()+"€<br>"
                    + "Coût vignette :  "
                    +myiti.getRoadTaxCost()+"€<br>";      
            
            document.getElementById('youritiresumediv').style.display = '';
            document.getElementById('youritiresumediv').innerHTML = strHTML;
         }
         
         /* L'affichage de la liste des pays */
         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>
   
   <!-- Lancement automatique du script javascript après le chargement de la page -->
   <body onload="load_country();">
      <h1>ViaMichelin - Exemple d'itinéraire</h1>
      <p>Calculer un itinéraire entre deux adresses postales</p>
      
      <table>
         <tr>
            <td>
               <form name="itisearch_form">
                  <fieldset>
                     <legend>départ</legend>
      
                     <label for="form_Start_address">Adresse :</label>
                     <input type="text" value="" name="form_Start_address" 
                        id="form_Start_address"/>
                     
                     <br/>
                     
                     <label for="form_Start_CP">Code Postal :</label>
                     <input type="text" value="75001" name="form_Start_CP" 
                        id="form_Start_CP"/>
                     
                     <br/>
                     
                     <label for="form_Start_city">Ville :</label>
                     <input type="text" value="" name="form_Start_city" />
                     
                     <label for="form_Start_country">Pays :</label>
                     <div id="div_country_start"></div>
                  </fieldset>
      
                  <br />
      
                  <fieldset>
                     <legend>Destination</legend>
      
                     <label for="form_Stop_address">Adresse :</label>
                     <input type="text" value="" name="form_Stop_address" 
                        id="form_Stop_address"/>
                     
                     <br/>
                     
                     <label for="form_Stop_CP">Code Postal :</label>
                     <input type="text" value="93260" name="form_Stop_CP" 
                        id="form_Stop_CP">
                     
                     <br/>
                     
                     <label for="form_Stop_city">Ville :</label>
                     <input type="text" value="" name="form_Stop_city" 
                        id="form_Stop_city"/>
                     
                     <label for="form_Stop_country">Pays :</label>
                     <div id="div_country_stop"></div>
                  </fieldset>
      
                  <br/>
                  
                  <fieldset>
                     <legend>Etape</legend>
                     
                     <label for="form_Step_address">Adresse :</label>
                     <input type="text" value="" name="form_Step_address" 
                        id="form_Step_address"/>
                     
                     <br/>
                     
                     <label for="form_Step_CP">Code Postal :</label>
                     <input type="text" value="" name="form_Step_CP" 
                        id="form_Step_CP"/>
                     
                     <br/>
                     <label for="form_Step_city">Ville :</label>
                     <input type="text" value="" name="form_Step_city" 
                        id="form_Step_city"/>
                     
                     <label for="form_Step_country">Pays :</label>
                     <div id="div_country_step"></div>
                  </fieldset>
                  
                  <br/>
                  
                  <fieldset>
                     <legend>Options</legend>
                     
                     <label for="form_Type">Type de trajet :</label> 
                     <select name="form_Type" id="form_Type">
                     <option value="0">Recommendé par Michelin</option>
                     <option value="1">Le plus court</option>
                     <option value="2">Le plus rapide</option>
                     <option value="3">Economique</option>
                     <option value="4">Découverte</option>
                     <option value="5">A pieds</option>
                     <option value="6">A Vélo</option>
                     </select>
                     
                     <br/>
                     
                     <div id="option_type">
                     <label for="form_Vh">Type de véhicule :</label> 
                     <select name="form_Vh" id="form_Vh">
                     <option value="0" selected>Automobile</option>
                     <option value="1">Moto</option>
                     <option value="2">Caravane</option>
                     </select>
                     
                     <br/>
                     
                     <label for="form_Cat">Catégorie de véhicule :</label>
                     <select name="form_Cat" id="form_Cat">
                     <option value="0" selected>Citadine</option>
                     <option value="1">Compacte</option>
                     <option value="2">Familiale</option>
                     <option value="3">Routière</option>
                     <option value="4">Luxe</option>
                     </select>
                     
                     <br />
                     <label for="form_Carb">Type de carburant</label>
                     <select name="form_Carb" id="form_Carb">
                     <option value="0" selected>Essence</option>
                     <option value="1">Diesel</option>
                     <option value="2">GPL</option>
                     </select>
                     
                     <br />
                     
                     <label for="form_Prix">Coût du carburant (euros) :</label>
                     <input type="text" value="1.1" name="form_Prix" size="5" />
                     </div>
                  </fieldset>
      
                  <br />
      
                  <input type="button" value="Rechercher" 
                     onclick="search_start_location();" />
               </form>
      
            </td>
            <td class="result">
               <div id="result_action" style="display:none">
               <input type="button" value="Afficher la carte de l'itinéraire" 
               onclick="display_onmap();" />
               <input type="button" value="Afficher l'itinéraire détaillé" 
               onclick="display_roadsheet();"/>
               <input type="button" value="Afficher l'itinéraire résumé" 
               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>

Faire un distancier

<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">
	/* Insérez ici votre clé  */
	VMAPI.registerKey("JSBS20070201123465789");
	VMAPI.setLanguage("gbr");

	/* Le tableau qui contient les différentes adresses qui constituent le distancier */
	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(){
			//Pour pouvoir lancer les demandes de distance, il faut déjà que les lieux soient géolocalisé
			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>

Documentation associée

Insérer un logo sur des coordonnées géographiques

<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">
            /* Insérez ici votre clé */
            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);
                
                /* Création de l'objet image */
                var image = new VMIcon('http://dev.viamichelin.fr/wswebsite/fra/img/petit_bib.gif',-12,-12);
                /* Création de la couche sur laquelle on positionne l'image */
                var coucheImage = new VMIconLayer(
                    localisation_entreprise, 
                    image, 
                    "ViaMichelin"
                );
                /* Ajout de la couche sur l'image */
                map.addLayer(coucheImage);
                        
                map.showMapTools();
            }
        </script>
    </head>
    
    <!-- Lancement automatique du script javascript après le chargement de la page -->
    <body onload="initialise_adresse_et_carte();">
        <h1>ViaMichelin - Exemple de logo</h1>
        <p>Insérer un logo sur une carte</p>
        <div id="yourmapdiv" style="width:400px; height:320px"></div>
    </body>
</html>

Documentation associée

Lire les coordonnées actuelles de la carte

<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">
            /* Insérez ici votre clé */
              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(){
                /* Quelles que soient les mouvements de carte déclenchés par l'utilisateur, la méthode getCenter() renvoit les coordonnées actuelles du centre de la carte */
                alert(map.getCenter());
            }
        </script>
    </head>
    
    <!-- Lancement automatique du script javascript après le chargement de la page -->
    <body onload="initialise_adresse_et_carte();">
        <div id="yourmapdiv" style="width: 500px; height: 500px"></div>
        <input type="button" value="Calcul des coordonnées"
            onclick="coordonnees()" />
    </body>
</html>

Documentation associée

VMaddress

Réaliser un export GPS

<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">
        /* Insérez ici votre clé */
        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);
        }
        
        /* L'affichage de la liste des pays */
        function load_country(){
            VMCountryUtil.addEventHandler(
                  "onCallBack",
                  function(){
                        document.getElementById("div_country").innerHTML 
                         = VMCountryUtil.getSelectHTMLString("country","FRA");
                      }
                  );
              VMCountryUtil.loadCountryLabels();
        }
        
        /* Fonction qui déclenche l'export sous la forme d'un fichier */
        function export_function(){
            myexport = new VMExportAsXVM();
            myexport.exportXVM(geocoder.result,"export_file");
        }
        </script>
    </head>
    
    <!-- Lancement automatique du script javascript après le chargement de la page -->
    <body onload="load_country();">
        <h1>ViaMichelin - Exemple d'export</h1>
        <p>Exporter des coordonnées pour votre 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>

Documentation associée

Exemple complet - Etude de cas

Afficher une carte dont le centre est l'adresse d'une entreprise
Ajouter le logo de l'entreprise sur la carte
Permettre à l'utilisateur de calculer un itinéraire vers l'entreprise (avec levée d'ambiguïté sur le point de départ)
Permettre à l'utilisateur de trouver un hôtel à proximité
Faire un export GPS des coordonnées géographiques de l'entreprise
Afficher la météo

<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">
          /* Clef d'enregistrement et langue de l'utilisateur */
          VMAPI.registerKey("JSBS20070201123465789");
          VMAPI.setLanguage("fra");
         
         /* Informations initiales à propos de l'entreprise */
         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';
         
         /* La carte */
         var map;
         var carte_largeur = 500;
         var carte_hauteur = 500;
                  
         /* L'objet qui permet de transformer une adresse en point géolocalisé */
         var geocoder;
         var geosearch;
         var myweather;
         
         /* Les coordonnées calculées de l'entreprise */
         var localisation_entreprise;
         var localisation_from;
         
         /* L'objet qui permet de calculer des Itinéraires */
         var myiti;
         var sanscarbu = false;
         var couleur_itineraire = "#00FFFF";
         
         /* L'identifiant des balises div dans lesquelles on affiche les résultats */
         var itidiv_id = "youritidiv";
         var poidiv_id = "yourpoidiv";
         var mapdiv_id = "yourmapdiv";
         
         function initialise_adresse_et_carte(){
            /* Création d'un outil transformant une adresse en point géographique */
             geocoder = new VMGeocoder();
             
             /* Création d'un objet adresse */
             var myaddress = new VMAddress();
             myaddress.address = entreprise_adresse;
             myaddress.zipCode = entreprise_cp;
             myaddress.city = entreprise_ville;
             myaddress.countryVMCode = entreprise_pays;
   
            /* Quelle méthode sera appelée lorsque le géocoder répondra */
             geocoder.addEventHandler("onCallBack", 
                 initialise_carte);
                
             /* Lancement de la recherche */
             geocoder.search(myaddress);
         }
         
         /* Initialisation de la carte */
         function initialise_carte(){
             /* Création de l'objet carte, centrage, on considère que le géocoder ne va pas détecter d'ambïiguité sur l'adresse initiale de l'entreprise */
            map = new VMMap(document.getElementById(mapdiv_id));
            localisation_entreprise = geocoder.result;
            
            /* Redimensionnement de la taille de la carte */
            map.addEventHandler("onCallBack", function(){
                map.resizeTo(carte_largeur, carte_hauteur);
            });
            
            /* Dessin effectif de la carte */
            map.drawMap(localisation_entreprise, 15);
            
            /* Permet d'ajouter les outils cartographiques de navigation */
            map.showMapTools();
   
            var image = new VMIcon(entreprise_logo,-12,-12);
            var coucheImage = new VMIconLayer(
                localisation_entreprise, 
                image, 
                entreprise_logo_texte);
            map.addLayer(coucheImage);
         }
         
         /* L'affichage de la liste des pays */
         function load_country(){
            VMCountryUtil.addEventHandler(
               "onCallBack",
               function(){
                  document.getElementById("div_country").innerHTML = 
                  VMCountryUtil.getSelectHTMLString("country","FRA");
               }
            );
            VMCountryUtil.loadCountryLabels();
         }
         
         function lance_itineraire(){
            myiti = new VMItinerary();
            
            /* Récupération des informations données par l'utilisateur */
            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;
            
            /* Création d'un objet adresse */
             var myaddress = new VMAddress();
                
             /* Alimentation de l'adresse */
             myaddress.address = from_adresse;
             myaddress.zipCode = from_cp;
             myaddress.city = from_ville;
             myaddress.countryVMCode = from_pays;
   
            geosearch = new VMGeoSearch();
   
            /* Quelle méthode sera appelée lorsque le geosearch répondra */
            geosearch.addEventHandler("onCallBack",calcul_from);
            
            /* Lancement de la recherche */
            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";
         }
         
         /* La communication javascript est asynchrone, la fonction d'itinéraire est donc composée de plusieurs fonctions */
         function ajout_etapes_itineraire(){
            /* Provenance */
            myiti.addStopOver(localisation_from);
            
            /* Destination */
            myiti.addStopOver(localisation_entreprise);
            
            var form = document.getElementById("iti_form").elements;
            /* Type d'itinéraire */
            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);
            }
      
            /* Quelle méthode sera appelée lorsque l'itinéraire répondra */
            myiti.addEventHandler("onCallBack", fin_itineraire);
            
            /* Lancement de la recherche */
            myiti.search(); 
         }
         
         /* La communication javascript est asynchrone, la function d'itinéraire est donc composée de plusieurs fonctions */
         function fin_itineraire(){
            document.getElementById(mapdiv_id).innerHTML = "";
            
            /* Création d'une nouvelle carte - Ajout du tracé de l'itinéraire sur la carte et en texte */
            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;
         }
         
         /* Afficher / Cacher le résultat textuel de l'itinéraire pour voir facilement le résultat de la recherche d'hôtels */
         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";
              }
         }
         
         /* Afficher / Cacher le résultat textuel de la recherche d'hôtels */
         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>
   
   <!-- Lancement automatique du script javascript après le chargement de la page -->
   <body onload="initialise_adresse_et_carte(); load_country();">
      <h1>ViaMichelin - Exemple complet</h1>
      <p>Etude de cas</p>

      <ul>
         <li>Afficher une carte dont le centre est l'adresse d'une entreprise</li>
         <li>Ajouter le logo de l'entreprise sur la carte</li>
         <li>Permettre à l'utilisateur de calculer un itinéraire vers l'entreprise (avec levée d'ambiguïté sur le point de départ)</li>
         <li>Permettre à l'utilisateur de trouver un hôtel à proximité</li>
         <li>Faire un export GPS des coordonnées géographiques de l'entreprise</li>
         <li>Afficher la météo</li>
      </ul>

      <div id="yourmapdiv" style="width: 500px; height: 500px"></div>
      
      <input type="button" onclick="export_function()"
         value="Exporter les coordonnées de l'entreprise vers votre GPS" />
      <input type="button" onclick="meteo()"
         value="Afficher les données météo" />
      <input type="button" onclick="meteo_demain()"
         value="Afficher les prévisions météo" />
      
      <div id="yourmeteodiv"></div>
      
      <form id="iti_form">
         <fieldset>
            <legend>
               Recherche d'itinéraire vers l'entreprise
            </legend>
            <table>
               <tr>
                  <th><label for="adresse">Adresse</label></th>
                  <td>
                     <input type="text" name="adresse" id="adresse" value="carnot" />
                  </td>
                  <th>
                     <label for="cp">Code Postal</label>
                  </th>
                  <td>
                     <input type="text" name="cp" id="cp" value="45400" />
                  </td>
               </tr>
               <tr>
                  <th><label for="ville">Ville</label></th>
                  <td>
                     <input type="text" name="ville" id="ville" value="" />
                  </td>
                  <th><label for="country">Pays</label></th>
                  <td colspan="3">
                     <div id="div_country"></div>
                  </td>
               </tr>
               <tr>
                  <th id="maybeone" style="display: none">
                     <label for="result_reco">
                        Selectionner votre point de départ
                     </label>
                  </th>
                  <td id="maybetwo" style="display: none" colspan="3">
                     <select id="result_reco" name="result_reco"></select>
                     <input type="button" onclick="selectionner()" 
                        value="Selectionner" />
                  </td>
               </tr>
               <tr>
                  <th>Type de trajet</th>
                  <td class="inline" colspan="3">
                     
                     <input type="radio" name="itinaryType" value="0" 
                        checked="checked" id="itinaryType_0" />
                     <label for="itinaryType_0">Conseillé</label>

                     <input type="radio" name="itinaryType" value="1" 
                        id="itinaryType_1" />
                     <label for="itinaryType_1">Court</label>

                     <input type="radio" name="itinaryType" value="2" 
                        id="itinaryType_2" />
                     <label for="itinaryType_2">Rapide</label>

                     <input type="radio" name="itinaryType" value="3" 
                        id="itinaryType_3" />
                     <label for="itinaryType_3">Economique</label>

                     <input type="radio" name="itinaryType" value="4"
                        id="itinaryType_4" />
                     <label for="itinaryType_4">Agréable</label>

                     <input type="radio" name="itinaryType" value="5"
                        id="itinaryType_5" />
                     <label for="itinaryType_5">Piéton</label>

                     <input type="radio" name="itinaryType" value="6" 
                        id="itinaryType_6" />            
                     <label for="itinaryType_6">Vélo</label>
                  </td>
               </tr>
               <tr>
                  <th>Type de véhicule</th>
                  <td class="inline" colspan="3">
                     <input type="radio" name="itineraryVehicleType" 
                        id="itineraryVehicleType_0" value="0" checked="checked" />
                     <label for="itineraryVehicleType_0">Voiture</label>
            
                     <input type="radio" name="itineraryVehicleType" value="1"
                        id="itineraryVehicleType_1" />
                     <label for="itineraryVehicleType_1">Moto</label>
            
                     <input type="radio" name="itineraryVehicleType" value="2"
                        id="itineraryVehicleType_2" />
                     <label for="itineraryVehicleType_2">Caravane</label>
                  </td>
               </tr>
               <tr>
                  <th>Type de voiture</th>
                  <td colspan="3" class="inline">
                     <input type="radio" name="carType" value="0" 
                        checked="checked" id="carType_0" />
                     <label for="carType_0">Citadine</label>
                     
                     <input type="radio" name="carType" value="1"
                        id="carType_1" />
                     <label for="carType_1">Compacte</label>
                     
                     <input type="radio" name="carType" value="2"
                        id="carType_2" />
                     <label for="carType_2">Familiale</label>
                  
                     <input type="radio" name="carType" value="3"
                        id="carType_3" />
                     <label for="carType_3">Routiere</label>
                     
                     <input type="radio" name="carType" value="4"
                        id="carType_4" />
                     <label for="carType_4">Luxe</label>
                  </td>
               </tr>
               <tr>
                  <th>Type de carburant</th>
                  <td colspan="3" class="inline">
                     <input type="radio" name="fuelType" 
                        value="0" checked="checked" id="fuelType_0" />
                     <label for="fuelType_0">Essence</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">GPL</label>
                  </td>
               </tr>
               <tr>
                  <th><label for="fuelCost">Prix du carburant</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="Chercher un itinéraire" />
                     <input type="button" id="cacher" onclick="cacher_itineraire();"
                        value="Afficher/Cacher l'itinéraire" />
                  </td>
               </tr>
            </table>
            
            <p>Distance : <span id="km"></span> km 
               - Coût Carburant <span id="cout_carbu"></span> €
            </p>
         </fieldset>
      </form>
      
      <div id="youritidiv"></div>
      
      <form>
         <fieldset>
            <legend>
               Recherche d'hôtels à proximité de l'entreprise
            </legend>
            <input type="button" onclick="lance_hotels();" 
               value="Chercher un hôtel" />
            <input type="button" id="cacher" onclick="cacher_hotels();"
               value="Afficher/Cacher la liste d'hôtels" /
         </fieldset>
      </form>
      
      <div id="yourpoidiv" style="display: block"></div>
      
   </body>
</html>

REST API

JavaScript API

SOAP API

ViaMichelin - JavaScript API V1 - Exemples (Déprécié)

Exemples disponibles

Appels à ViaMichelin JavaScript API

Définir une langue (pour la feuille de route, la météo, la recherche de POI)

Créer une carte

Documentation associée

Faire un géocodage

Documentation associée

Faire une levée d'ambiguïté sur une adresse

Documentation associée

Créer une liste de pays

Documentation associée

Faire une recherche d'hôtel

Documentation associée

Faire une recherche de proximité

Documentation associée

Faire un calcul d'itinéraire

Faire un distancier

Documentation associée

Insérer un logo sur des coordonnées géographiques

Documentation associée

Lire les coordonnées actuelles de la carte

Documentation associée

Réaliser un export GPS

Documentation associée

Exemple complet - Etude de cas

Documentation associée