Examples - using POI

Hotel search

Voir l'exemple 
<html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 <title>ViaMichelin Maps & Drive API</title>
 
 <script src="http://api.viamichelin.com/apijs/js/api.js" 
 type="text/javascript"></script>
 
 <script type="text/javascript">
 /* Insert your key */
 VMAPI.registerKey("JSBS20070201123465789");
 VMAPI.setLanguage("fra");
 
 /* Search a hotel */
 function geocoder_search(){
 document.getElementById("div_reco").style.display = "none";
 geosearch = new VMGeoSearch();
 myaddress = new VMAddress();
 var elements_formulaire = 
 document.forms['geocoder_form'].elements;
 
 myaddress.address = elements_formulaire['form_address'].value;
 myaddress.zipCode = elements_formulaire['form_CP'].value;
 myaddress.city = elements_formulaire['form_city'].value;
 myaddress.countryVMCode = elements_formulaire['country'].value;
 
 /* What method will be called by the server response */
 geosearch.addEventHandler("onCallBack",display_ambiguity);
 /* Launch the search */
 geosearch.search(myaddress);
 }
 
 /* What method will be called by the server response */
 function display_ambiguity(){
 if (geosearch.results.length > 1){
 var elements_formulaire = 
 document.forms['geocoder_form'].elements;
 for (var i=elements_formulaire.options.length;i>=0;i--){
 elements_formulaire['result_reco'].options[i] = null;
 }
 for (var j=0;j<geosearch.results.length;j++){
 elements_formulaire['result_reco'].options[j] = 
 new Option(geosearch.results[j].VMAmbiguityLine,j);
 }
 
 document.getElementById("div_reco").style.display = "";
 } else {
 document.getElementById("div_reco").style.display = "none";
 hotel_definition(0);
 }
 }
 
 function hotel_definition(idx){
 index = idx;
 poiDefinition = new VMPOIDefinition();
 poiDefinition.addEventHandler("onCallBack", hotel_search);
 poiDefinition.getHotelsDefiniton();
 }
 
 function hotel_search(){
 myPOIsearch = new VMPOISearch(poiDefinition);
 myPOIsearch.addEventHandler("onCallBack", hotel_result);
 myPOIsearch.searchHotels(geosearch.results[index].coords);
 }
 
 /* The function is called when the server returns a result list */
 function hotel_result(){
 if (myPOIsearch.result.VMPOIs.length > 0){
 myPOIlist = myPOIsearch.result;
 
 document.getElementById("yourmapdiv").innerHTML = "";
 
 map = new VMMap(document.getElementById("yourmapdiv"));
 myPOIlistlayer = myPOIlist.getLayer();
 map.addLayer(myPOIlistlayer);
 map.drawMapFromLayers();
 
 document.getElementById("yourhtmldiv").innerHTML = 
 myPOIlist.getHTML();
 } else {
 alert("Aucun h�tel trouv�");
 }
 }
 
 /* Display the countries list */
 function load_country(){
 VMCountryUtil.addEventHandler(
 "onCallBack",
 function(){
 document.getElementById("div_country").innerHTML 
 = VMCountryUtil.getSelectHTMLString("country","FRA");
 }
 );
 VMCountryUtil.loadCountryLabels();
 }
 </script>
 </head>
 
 <!-- Automatic script launch, after the page loading -->
 <body onload="load_country()">
 <h1>ViaMichelin - Hotels search</h1>
 <p>
 Search hotels next to a postal address
 </p>

 <form name="geocoder_form">
 <label for="form_address">Address:</label>
 <input type="text" value="" 
 name="form_address" id="form_adress">
 
 <br />
 
 <label for="form_CP">Postal Code:</label>
 <input type="text" value="" name="form_CP" id="form_CP"/> 
 
 <br />
 
 <label for="form_city">City:</label>
 <input type="text" value="CLERMONT-FERRAND" 
 name="form_city" id="form_city"/> 
 
 <br />
 
 <label for="form_country">Country:</label>
 <div id="div_country"></div>
 <br />

 <input type="button" value="Search" 
 onclick="geocoder_search();"/>
 <div id="div_reco" style="display:none">
 Choisissez l'emplacement :
 <select name="result_reco">
 </select>
 <input type="button" value="Display" name="makeReco" 
 onclick="hotel_definition(document.forms['geocoder_form'].elements['result_reco'].selectedIndex);"/>
 </div>
 </form>
 
 <div id="yourmapdiv" 
 style="width:400px; height:320px;width:490px;height:300px; border: 1px solid Navy;"></div>
 
 <br/>
 
 <div id="yourhtmldiv" 
 style="width:400px; height:320px;border: 1px dashed Purple; margin-top: 5px; overflow: auto; background-color: #C2D2F8;"></div>
 
 </body>
</html>

Documentation

POI proximity search

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

 <script src="http://api.viamichelin.com/apijs/js/api.js" type="text/javascript"></script>
 <script type="text/javascript">
 /* Insert your key */
 VMAPI.registerKey("JSBS20070201123465789");
 VMAPI.setLanguage("fra");
 
 /* From address to geographical point */
 function geocoder_search(){
 document.getElementById("div_reco").style.display = "none";
 geosearch = new VMGeoSearch();
 myaddress = new VMAddress();
 
 var elements_formulaire = document.forms['geocoder_form'].elements;
 
 myaddress.address = elements_formulaire['form_address'].value;
 myaddress.zipCode = elements_formulaire['form_CP'].value;
 myaddress.city = elements_formulaire['form_city'].value;
 myaddress.countryVMCode = elements_formulaire['country'].value;
 
 geosearch.addEventHandler("onCallBack",display_ambiguity);
 geosearch.search(myaddress);
 }
 
 /* Manage ambiguity */
 function display_ambiguity(){
 if (geosearch.results.length > 1){
 
 for (var i=document.forms['geocoder_form'].elements['result_reco'].options.length;i>=0;i--){
 document.forms['geocoder_form'].elements['result_reco'].options[i] 
 = null;
 }
 for (var j=0;j<geosearch.results.length;j++){
 document.forms['geocoder_form'].elements['result_reco'].options[j] 
 = new Option(geosearch.results[j].VMAmbiguityLine,j);
 }
 
 document.getElementById("div_reco").style.display = "";
 } else {
 document.getElementById("div_reco").style.display = "none";
 poi_definition(0);
 }
 }
 
 /* Point Of Interest definition */
 function poi_definition(idx){
 index = idx;
 poiDefinition = new VMPOIDefinition();
 poiDefinition.addEventHandler("onCallBack",poi_search);
 poiDefinition.getDefiniton("113981");
 }
 
 /* With the location, and the POI type, we can start the search */
 function poi_search(){
 myPOIsearch = new VMPOISearch(poiDefinition);
 myPOIsearch.addEventHandler("onCallBack",poi_result); 
 myPOIsearch.search(geosearch.results[index].coords);
 }
 
 /* Affichage des réponses fournies par le serveur */
 function poi_result(){
 if (myPOIsearch.result.VMPOIs.length > 0){
 myPOIlist = myPOIsearch.result;
 
 document.getElementById("yourmapdiv").innerHTML = "";
 
 map = new VMMap(document.getElementById("yourmapdiv"));
 
 for (i=0;i<myPOIsearch.result.VMPOIs.length;i++){
 var myPOIlayer;
 
 poiHTML = "<div style='width:200px'><strong>"+myPOIsearch.result.VMPOIs[i].name+"</strong><br>";
 poiHTML += "<br>"+myPOIsearch.result.VMPOIs[i].displayAddress;
 poiHTML += "<br>icone : "+myPOIsearch.result.VMPOIs[i].iconsId[0];
 j=0;
 iconsHTML = "";
 while (j < myPOIsearch.result.VMPOIs[i].metaNums.length){
 if ((myPOIsearch.result.VMPOIs[i].definition.getCriteriaByNum(j+1))
 &&(myPOIsearch.result.VMPOIs[i].definition.getCriteriaByNum(j+1).isDisplay) 
 && (myPOIsearch.result.VMPOIs[i].definition.getCriteriaByNum(j+1).type == 0) 
 && (myPOIsearch.result.VMPOIs[i].metaNums[j] != 0)){
 iconsHTML += "<img src='/viamichelin/client_data/TEST_FO/113981/"+myPOIsearch.result.VMPOIs[i].definition.language+"/images/"+myPOIsearch.result.VMPOIs[i].definition.getCriteriaByNum(j+1).number+"_"+myPOIsearch.result.VMPOIs[i].metaNums[j]+".gif' align='absmiddle' title='"+myPOIsearch.result.VMPOIs[i].definition.getCriteriaByNum(j+1).getLibValue(myPOIsearch.result.VMPOIs[i].metaNums[j])+"'/> ";
 }
 j++;
 }
 
 poiHTML += "<br>"+iconsHTML;
 poiHTML += "</div>";
 myPOIlayer = myPOIsearch.result.VMPOIs[i].getLayer();
 myPOIlayer.setExpandLayer(poiHTML);
 map.addLayer(myPOIlayer);
 }
 
 map.drawMapFromLayers();
 map.showMapTools(0);
 
 document.getElementById("yourhtmldiv").innerHTML = myPOIlist.getHTML();
 
 } else {
 alert("No POI found");
 }
 
 }
 
 /* Display the country list */
 function load_country(){
 VMCountryUtil.addEventHandler(
 "onCallBack",
 function(){
 document.getElementById("div_country").innerHTML 
 = VMCountryUtil.getSelectHTMLString("country","FRA");
 }
 );
 VMCountryUtil.loadCountryLabels();
 }
 </script>
 </head>
 
 <!-- Automatic script launch, after the page loading -->
 <body onload="load_country()">
 <h1>ViaMichelin - Proximity search example</h1>
 <p>Find POI next to a postal address</p>
 
 <form name="geocoder_form">
 <label for="form_address">Address:</label>
 <input type="text" value="Place des Carmes-D�chaux" 
 name="form_address" id="form_adress"/>
 
 <br />
 
 <label for="form_CP">Postal Code:</label>
 <input type="text" value="63040" name="form_CP" id="form_CP"/> 
 
 <br />
 
 <label for="form_city">City:</label>
 <input type="text" value="CLERMONT-FERRAND" name="form_city" id="form_city"/> 
 
 <br />
 
 <label for="form_country">Country:</label>
 <div id="div_country"></div>
 
 <br />
 
 <input type="button" value="Search" onclick="geocoder_search();">
 <div id="div_reco" style="display:none">
 Choose the location:
 <select name="result_reco"></select>
 <input type="button" value="Display" name="makeReco" 
 onclick="poi_definition(document.forms['geocoder_form'].elements['result_reco'].selectedIndex);"/>
 </div>
 </form>
 
 <div id="yourmapdiv" 
 style="width:400px; height:320px;width:490px;height:300px; border: 1px solid Navy;"></div>
 <br>
 <div id="yourhtmldiv" 
 style="width:400px; height:320px;border: 1px dashed Purple; margin-top: 5px; overflow: auto; background-color: #C2D2F8;"></div>
 
 </body>
</html>

Documentation