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