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&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.
