Geocoding examples

Geocoding

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");
         
         /* Ask the server the geocoding */
         function geocoder_search(){
            geocoder = new VMGeocoder();
            myaddress = new VMAddress();
            var elements_formulaire = 
               document.forms['geocoder_form'].elements;
            
            myaddress.address = elements_formulaire['form_address'].value;
            myaddress.zipCode = elements_formulaire['form_CP'].value;
            myaddress.city = elements_formulaire['form_city'].value;
            myaddress.countryVMCode = elements_formulaire['country'].value;
            geocoder.addEventHandler("onCallBack",display_result);
            geocoder.search(myaddress);
         }
         
         /* Function called after the server response */
         function display_result(){
            alert("Le code est "+geocoder.result);
         }
         
         /* Display the countries list */
         function load_country(){
            VMCountryUtil.addEventHandler(
                  "onCallBack",
                  function(){
                      document.getElementById("div_country").innerHTML 
                       = VMCountryUtil.getSelectHTMLString("country","FRA");
                     }
                  );
               VMCountryUtil.loadCountryLabels();
           }
      </script>
   </head>
   
   <!-- Automatic script launch, after the page loading -->
   <body onload="load_country()">
      <h1>ViaMichelin - Geocoding example</h1>
      <p>
         Transform an postal address into a geographical point
      </p>
   
      <form name="geocoder_form">
      
      <label for="form_address">Address:</label>
      <input type="text" value="Place des Carmes-Déchaux" 
         name="form_address" id="form_adress"/>
      
      <br />
      
      <label for="form_CP">Postal Code:</label>
      <input type="text" value="63040" name="form_CP" id="form_CP"/> 
      
      <br />
      
      <label for="form_city">City:</label>
      <input type="text" value="CLERMONT-FERRAND" 
         name="form_city" id="form_city"/> 
      
      <br />
      
      <label for="form_country">Country:</label>
      <div id="div_country"></div>
      <br />
      
      <input type="button" value="Start" 
         onclick="geocoder_search();">
      </form>
   </body>
</html>

Documentation

Remove ambiguity on an address

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");

    /* Setting and launching the search */
    function geocoder_search(){
        geosearch = new VMGeoSearch();
        myaddress = new VMAddress();
         
        var elements_formulaire = document.forms['geocoder_form'].elements;
        var element_pays = elements_formulaire['country'];
        
        myaddress.address = elements_formulaire['form_address'].value;
        myaddress.zipCode = elements_formulaire['form_CP'].value;
        myaddress.city = elements_formulaire['form_city'].value;
        if(typeof(element_pays)!="undefined"){
            myaddress.countryVMCode = element_pays.value;
        } else {
            myaddress.countryVMCode = "FRA";
        }
    
        geosearch.addEventHandler("onCallBack",display_result);
        geosearch.search(myaddress);
    }
    
    /* Server gave an adress list */
    function display_result(){
        var tmp = "";
        if (geosearch.results.length == 0){
            alert("Aucun résultat !")
        } else {
            for (var i=0; i<geosearch.results.length; i++){
                tmp +=     "<p> "+ i 
                        + " | Longitude : " 
                        + geosearch.results[i].coords.lon 
                        + " Latitude : " 
                        + geosearch.results[i].coords.lat 
                        + " | <strong>"
                        +geosearch.results[i].VMAmbiguityLine 
                        +"</strong>"
                        + " </p>";
            }
            document.getElementById("yourhtmldiv").innerHTML = tmp;
        }
    }
    
    /* Display the countries list */
    function load_country(){
        VMCountryUtil.addEventHandler(
            "onCallBack",
             function(){
                   document.getElementById("div_country").innerHTML 
                       = VMCountryUtil.getSelectHTMLString("country","FRA");
                 }
             );
         VMCountryUtil.loadCountryLabels();
    }
   </script>
  </head>
  
  <!-- Automatic script launch, after the page loading -->
  <body onload="load_country()">
      <h1>Removing ambiguity - example</h1>
      <p>
          What address is the user looking for ?
      </p>
  
    <form name="geocoder_form">
        <label for="form_adress">Address:</label>
        <input type="text" value="Place des Carmes-Déchaux" 
            id="form_address" name="form_address"/>
        
        <br/>
        
        <label for="form_CP">Postal Code:</label>
        <input type="text" value="63040" name="form_CP" id="form_CP"/>
        
        <br/>
        
        <label for="form_city">City:</label>
        <input type="text" value="CLERMONT-FERRAND" 
            name="form_city" id="form_city"/>
        
        <br/>
        
        <label for="country">Country:</label>
        <div id="div_country"></div>
        
        <input type="button" value="Search" 
            onclick="geocoder_search();"/>
        
        <div id="yourhtmldiv"></div>
    </form>
  </body>
</html>

Documentation

Create a country list

Voir l'exemple
<!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 Maps & Drive API</title>
                 
        <!-- Via Michelin Libraries -->
        <script src="http://api.viamichelin.com/apijs/js/api.js" 
            type="text/javascript"></script>

        <!-- Javascript code to display the map -->        
         <script type="text/javascript">
             /* Register key, and user language */
             VMAPI.registerKey("JSBS20070201123465789");
             VMAPI.setLanguage("fra");
            
            /* Display the countries list */
            function load_country(){
                VMCountryUtil.addEventHandler("onCallBack",function(){
                    document.getElementById("div_country").innerHTML = 
                        VMCountryUtil.getSelectHTMLString("country","FRA");
                });
                VMCountryUtil.loadCountryLabels();
            }
        </script>
    </head>

    <!-- Automatic script launch, after the page loading -->
    <body onload="load_country()">
        <h1>ViaMichelin - Countries list example</h1>
        <p>
            Display countries list
        </p>
    
        <label for="country">Country</label>
        <div id="div_country"></div>
    </body>
</html>

Documentation