post_ico1

Geolokalizacja i Google Maps, cz. 1 – wstęp do geolokalizacji

Dzięki popularyzacji i dynamicznemu wzrostowi rynku mobilnego (smartfonów i tabletów), twórcy stron internetowych oraz marketerzy zyskali kolejne narzędzie do personalizacji treści – geolokalizację.

Geolokalizacja jest narzędziem, które umożliwia określenie położenia geograficznego użytkownika strony. Określenie pozycji odbywa się na kilka sposobów:

Sposób lokalizacji

Szybkość

Dokładność

Przez IP

Szybka

Najmniej dokładna, pozwala na określenie miejscowosci

Przez Połączenie Wi-Fi

Szybka

Duża dokładność, pozawala na określenie ulicy, a nawet budynku

Przez Połączenie z wieżą telefoniczną

Szybka

Duża dokładność, pozawala na określenie ulicy, a nawet budynku

Przez GPS

Wolna

Pozwala określić dokładne położenie użytkownika

Oznaczanie użytkownika na mapie

Do oznaczenia lokalizacji użytkownika wykorzystamy Google Maps. Google udostępnia dość czytelną i dobrze zrobioną dokumentację API do interakcji z mapą. Zachęcam do zapoznania się z zasobami Google.

<!DOCTYPE html>
<html>
    <head>
        <style>
            html, body, #map_canvas {
                height: 100%;
                margin: 0px;
                padding: 0px;
            }
            #map-container{
                height: 100%;
            }
        </style>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&amp;libraries=places"></script>
        <script>
            /**
             *
             * @type @exp;google@pro;maps@call;Map Obiekt mapy
             */
            var map;
            /**
             * Marker oznaczajacy uzytkownika
             * @type @exp;google@pro;maps@call;Marker
             */
            var myMarker;

            /**
             * Tworzy obiekt mapy z podstawowymi ustawieniami
             * @returns void
             */
            function initialize() {
                var myLatlng = new google.maps.LatLng(0, 0);
                var mapOptions = {
                    zoom: 2,
                    center: myLatlng
                };
                map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
            }

            /**
             * Inicjalizuje geolokalizacje
             * void
             */
            function geolocalize() {
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(geolocalizeSuccess, geolocalizEerror, {enableHighAccuracy: true});
                } else {
                    error('not supported');
                }

            }
            /**
             * Obsluga geolokalizacji w przypadku bledu
             * @param  string msg
             * @returns void
             */
            function geolocalizEerror(msg) {
                var s = document.querySelector('#status');
                s.innerHTML = typeof msg == 'string' ? msg : "failed";
                s.className = 'fail';

                // console.log(arguments);
            }
            /**
             * Obsluga geolokalizacji w przypadku sukcesu
             * @param Position position
             * @returns void
             */
            function geolocalizeSuccess(position) {
                var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                myMarker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                    title: 'Twoja pozycja',
                    draggable: true,
                    icon: 'sciezka/do/ikony'
                });
                map.setCenter(latlng);
                map.setZoom(14);
            }

            google.maps.event.addDomListener(window, 'load', initialize);
            geolocalize();
        </script>
    </head>
    <body>
        <div id="map-container">
            <div id="map_canvas"></div>
        </div>
    </body>
</html>

No to teraz przeanalizujmy najważniejsze linie kodu ;) W linii 14 ładuję API od Google, następnie deklaruję dwie zmienne map i myMarker, które będą zawierać odpowiednio: obiekt mapy oraz obiekt markera. Funkcja initialize tworzy obiekt mapy i wyświetla go w kontenerze o id map_canvas, dodatkowo centruję mapę dla 0 stopni szerokości geograficznej i 0 stopni wysokości geograficznej. Do ustawiania współrzędnych geograficznych służy klasa LatLng.

Funkcja geolocalize próbuje pobrać pozycję użytkownika (metoda getCurrentPosition) i w przypadku powodzenia wywołuje funkcję geolocalizeSuccess. Udostępnienie lokalizacji odbywa się tylko za zgodą użytkownika, nie ma możliwości wykonania tego bez jego wiedzy i zgody.

W funkcji geolocalizeSuccess tworzę obiekt markera z takimi parametrami jak: współrzędne pobrane z geolokalizacji, obiekt mapy, nazwa markera, czy ma być możliwość przesuwania markera, ścieżka do ikony (domyślnie jest czerwona kropka). Dodatkowo centruję mapę w lokalizacji użytkownika oraz zwiększam powiększenie.

Na koniec dodaję listener, którego zadaniem jest wywołanie funkcji initialize po załadowywaniu całej strony. Aha… jeszcze trzeba wywołać funkcję geolocalize :)

Efekt działania kodu możesz zobaczyć tutaj.

To by było na tyle. Wpis ten jest początkiem cyklu o geolokalizacji i wykorzystaniu Google Maps. W kolejnych częściach opiszę bardziej szczegółowo obiekt do geolokalizacji, pokażę jak dodać inne markery (np. lokale) wraz z ich opisami i kilka innych rzeczy.

Jeżeli chcesz być na bieżąco informowany o nowych wpisach zachęcam do zapisania się do newslettera.

Co sądzisz o wpisie?
BeżnadziejnySłabyŚredniDobryBardzo dobry (Brak ocen, bądź pierwszy!)
Loading...