Geolokácia: ako zobraziť aktuálnu polohu na GoogleMap v HTML5

geolocation-map-marker

Nová funkcia geolokácia v HTML5 pridáva nástroje do prehliadača, ktoré sú potrebné na určenie polohy užívateľa, vytvorenie súradníc a vráti ich ako hodnoty späť k užívateľovi.

Táto funkcia bude fungovať nielen na stolných počítačoch, ale aj na mobilných zariadeniach – mobilné telefóny a tablety, čo otvára obrovské možnosti pre webových vývojárov, ktorí chcú vytvoriť zobrazenie aktuálnej polohy užívateľa na mape a jej umiestnenie na základe on-line aplikácie.

V dnešnom príklade si vytvoríme script na získanie súradníc polohy zemepisnej šírky a dĺžky pomocou len pár riadkov kódu HTML a JavaScript. Dozviete sa, ako sa tieto súradnice vložia do rozhrania API služby Mapy Google a vytvoríme živý náhľad v prehliadači s mapou vašej aktuálnej polohy – aj so značkou umiestnenia na mape.

<!DOCTYPE html> 
<html> 
    <head> 
        <META NAME="robots" CONTENT="noindex, nofollow">
        <META charset="UTF-8">
        <script src="http://maps.google.com/maps/api/js?sensor=false"></script> 
        <script> 
            if (navigator.geolocation) 
            { 
                navigator.geolocation.getCurrentPosition(showCurrentLocation); 
            } 
            else 
            { 
               alert("Geolocation API not supported."); 
            } 

            function showCurrentLocation(position) 
            { 
                var latitude = position.coords.latitude; 
                var longitude = position.coords.longitude; 
                var coords = new google.maps.LatLng(latitude, longitude); 

                var mapOptions = { 
                zoom: 15, 
                center: coords, 
                mapTypeControl: true, 
                mapTypeId: google.maps.MapTypeId.ROADMAP 
            }; 

            //Create map 
            map = new google.maps.Map( 
            document.getElementById("mapPlaceholder"), mapOptions 
            ); 

            //Create Marker 
            var marker = new google.maps.Marker({ 
            position: coords, 
            map: map, 
            title: "Current location!" 
            }); 
            } 
        </script> 
    </head> 
    <style> 
    #mapPlaceholder { 
        height: 400px; 
        width: 700px; 
    }
    </style> 
    <body> 
        <div> 
        <h2>HTML5 - Zobraziť pozíciu na GoogleMap</h2> 
        <div id="mapPlaceholder"></div> 
        </div> 
    </body> 
</html>

Zobraziť DEMO Geolokácia

Akonáhle si prejdete kód príkladu zobrazenia geolokácie v HTML5 – odporúčam pozrieť sa na kompletnú dokumentáciu API Google Maps. Spoznáte niektoré rozsiahlejšie a zaujímavejšie funkcie na vytváranie online polohy v HTML5.