Demo – využití GPS

Po zadání adresy se zobrazí její GPS souřadnice a pomocí souřadnic je adresa zobrazena i na mapě. Pro získání souřadnic slouží validační callback.

Formulář s využitím GPS:

Zdrojový kód – JavaScript:

<script type="text/javascript" src="https://client.smartform.cz/v2/smartform.js" async></script>
 <script type="text/javascript" src="https://api.mapy.cz/loader.js"></script>
 <script type="text/javascript">Loader.load();</script>
 <script type="text/javascript">
    var map;
    var markerLayer;
    var markers = [];    
    var coordinates = [];  
  
    var smartform = smartform || {};
    
    window.onload = function() {
       initMap();
    }
          
    smartform.beforeInit = function () {
       smartform.setClientId('[clientId]');
        
    }
    /* Nastavení validačního calllbacku */
    smartform.afterInit = function() {
       smartform.getInstance().addressControl.addValidationCallback(validationCallback);
    }

    /* Validační callback pro získání adresy a GPS souřadnic */
    function validationCallback(response) {
        if (response.result.type == smartform.AddressValidationResultType.HIT) {
                clear();
                var address = response.result.addressArray[0];
                showAddress(address);
        } else {
                clear();
        }
    }

   /* Inicializace mapy */
   function initMap(){          
        var origin = SMap.Coords.fromWGS84(15.5, 50);
        map = new SMap(JAK.gel("map_div"), origin, 10);
        map.addControl(new SMap.Control.Sync()); 
        map.addDefaultLayer(SMap.DEF_BASE).enable();            
        markerLayer = new SMap.Layer.Marker();
        map.addLayer(markerLayer);
        markerLayer.enable();           
        map.addDefaultControls();
   }

   /* Zobrazení adresy na mapě */
   function showAddress(address) {
        if( !address.GPS_LAT || !address.GPS_LONG) {
                // nektere adresy nemaji ulozene souradice 
                document.all.gps.outerHTML = '<div id=\"gps\" style=\"display:block\">Pro tuto adresu nejsou GPS souřadnice k dispozici.</div>';
        }  else {
                // zobrazeni GPS vedle mapy    
                document.all.gps.outerHTML = '<div id=\"gps\" style=\"display:block\">GPS souřadnice:<br /> <div style=\"font-weight:bold; font-size:1.2em; margin-top:4px\">' +
                format(address.GPS_LAT,address.GPS_LONG) +
                '</div><div style=\"font-size:0.8em; margin-bottom:4px;\">' + round(address.GPS_LAT) + ", " + round(address.GPS_LONG) + '</div></div>';
                // zobrazeni na mape
                showOnMap(address.GPS_LONG, address.GPS_LAT);
                centerTheView();
        }
   }

   /** Funkce na zaokrouhleni GPS souradnic. */
   function round(x) {
        return Math.round(x*1000000)/1000000;
   }
   
   /** Vymazani mapy a souradnic. Vola se, pokud nebyla zadana validni adresa. */        
   function clear(){    
        document.all.gps.outerHTML = '<div id=\"gps\" style=\"display:block\"></div>';   
        coordinates = [];
        markerLayer.removeAll();
        markers = [];
   } 
  
    /** Spocitani pozici mapy tak, aby znacky byly videt */
   function centerTheView(){
        var cz = map.computeCenterZoom(coordinates); /* Spočítat pozici mapy tak, aby značky byly vidět */
        var last = cz.length-1;
        map.setCenterZoom(cz[0], cz[last]); 
   }

   /** Prevedeni GPS souradnic z desetinneho formatu na zapis pomoci minut a sekund.
   * Napr.: (50.761701, 15.091974) -> 50°45'42.1''N 15°5'31.1''E     */
   function format(x, y) {        
        var xx = convertCoord(x);
        var yy = convertCoord(y);
        return xx+"N "+yy+"E";
   };
   
   /** Prevedeni jedne souradnice */  
   function convertCoord(dD) {
        var D = Math.floor(dD);
        var dM = (dD-D)*60;
        var M = Math.floor(dM); 
        var S = Math.round((dM-M)*600)/10;
        return D+"°"+M+"\'"+S+"\'\'";        
   }
   
   
     /** Zobrazeni souradnic na mape */
   function showOnMap(lonD, latD) { 
        var coords = SMap.Coords.fromWGS84(lonD, latD); /* Souřadnice značky, z textového formátu souřadnic */
   
        var options = {
                anchor: {left:10, bottom: 1}  /* Ukotvení značky za bod uprostřed dole */
        }
   
        var marker = new SMap.Marker(coords, null, options);
        coordinates.push(coords);
        markers.push(marker);
                                                
         for (var i=0; i < markers.length; i++) {
             markerLayer.addMarker(markers[i]);
        }
   }

</script>

Zdrojový kód – HTML pro formulář:

<form>
   <input class="smartform-address-street-and-number" id="smartform_ulice" placeholder="Ulice a číslo" type="text" />
   <input class="smartform-address-city" id="smartform_obec" placeholder="Obec" type="text" />
   <input class="smartform-address-zip" id="smartform_psc" placeholder="PSČ" type="text" />
   <div id="gps" style="display:block;"></div>
   <button onclick="smaz()">Ještě jednou</button>
</form>

Zdrojový kód – HTML pro mapu:

<div id="map_div" style="width:100%; margin-top: 0px"></div>