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 src="https://api.mapy.cz/v1/mapy.js"></script>
 <script type="text/javascript">
    var smartform = smartform || {};
          
    smartform.beforeInit = function () {
       smartform.setClientId('[clientId]');
    }

    /* Set validation callback */
    smartform.afterInit = function() {
       smartform.getInstance().addressControl.addValidationCallback(validationCallback);
    }

    /* Validation callback to get address and GPS coordinates */
    function validationCallback(response) {
        if (response.result.type == smartform.AddressValidationResultType.HIT) {
                var address = response.result.addressArray[0];
                showAddress(address);
        }
    }

   /* Display address on map */
   function showAddress(address) {
        if( !address.COORD_WGS84_LATITUDE || !address.COORD_WGS84_LONGITUDE) {
                document.getElementById("gps").innerHTML = 'Pro tuto adresu nejsou GPS souřadnice k dispozici.';
        }  else {
                document.getElementById("gps").innerHTML = 'GPS souřadnice: ' + address.COORD_WGS84_LATITUDE + ', ' + address.COORD_WGS84_LONGITUDE;
                showOnMap(address.COORD_WGS84_LONGITUDE, address.COORD_WGS84_LATITUDE);
        }
   }

   function showOnMap(lonD, latD) { 
        // Logic to center and mark point on map
   }
</script>

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

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

Zdrojový kód - HTML pro mapu:

<div id="map" style="width:100%; height:400px"></div>