Exemples d'utilisations des points d'intérêts

Faire une recherche d'hôtel

Voir l'exemple 
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>ViaMichelin Maps & Drive API</title>
                
        <script src="http://api.viamichelin.com/apijs/js/api.js" 
            type="text/javascript"></script>
        
        <script type="text/javascript">
            /* 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é

Voir l'exemple 
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>ViaMichelin Maps & Drive API</title>

        <script src="http://api.viamichelin.com/apijs/js/api.js" type="text/javascript"></script>
        <script type="text/javascript">
            /* 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