W projekcie, który ostatnio tworzę, potrzebowałem informacji o tym gdzie aktualnie znajduje się użytkownik aplikacji. Okazuje się, że lokalizacje można określić na wiele sposobów, poprzez GPS, IP, WiFi, czy nawet poprzez połączenie z wieżą telekomunikacyjną (więcej informacji tutaj).
Jednak problematyczne jest wyciągnięcie tych informacji z komputera, czy też smartfona klienta. Z pomocą przyszedł Google Maps, który z pomocą prostego JavaScript, prosi użytkownika o jego lokalizacje i w momencie pozytywnego rozpatrzenia prośby zaznacza lokalizacje na mapie, a w zmiennych przechowuje koordynaty.
Jednak to nadal nie rozwiązuje problemu przekazania koordynatorów do serwera, ponieważ te informacje są na komputerze/telefonie klienta. Tak więc wymyśliłem, że warto wykorzystać mechanizm cookies, dzięki któremu te dane zostaną przekazane.
Korzystając ze skryptu opisanego tutaj, stworzyłem własną implementacje, która przekazuje koordynaty do cookies.
<script type="text/javascript"> var map; var myMarker; function initialize() { var myLatlng = new google.maps.LatLng(0, 0); var mapOptions = { zoom: 2, center: myLatlng }; map = new google.maps.Map(document.getElementById('mapka'), mapOptions); } function geolocalize() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(geolocalizeSuccess, geolocalizEerror, { enableHighAccuracy: true }); } else { error('not supported'); } } function geolocalizEerror(msg) { var s = document.querySelector('#status'); s.innerHTML = typeof msg == 'string' ? msg : "failed"; s.className = 'fail'; } function geolocalizeSuccess(position) { var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); // ustawianie cookies if (document.cookie.indexOf("LocationLat") >= 0) { } else { document.cookie = "LocationLat=" + position.coords.latitude; document.cookie = "LocationLon=" + position.coords.longitude; reloadPage(); } document.cookie = "LocationLat=" + position.coords.latitude; document.cookie = "LocationLon=" + position.coords.longitude; myMarker = new google.maps.Marker({ position: latlng, map: map, title: 'Twoja pozycja', draggable: true, icon: 'person.png' }); map.setCenter(latlng); map.setZoom(14); } function reloadPage() { window.location.reload(); } google.maps.event.addDomListener(window, 'load', initialize); geolocalize(); </script>
Jestem przekonany, że da się to zrobić lepiej, więc jeżeli masz pomysł, pisz w komentarzu 🙂
Dzięki za wpis. Mi niestety działa tylko w połowie, tzn. jak wkleję kod i zapiszę pod html i odpalę to pyta o pozwolenie, zezwalam no i nakierowuje jedynie na moją miejscowość i wzrokowo na moje mieszkanie, ale niestety nie ma pinezki żeby dokładnie określiło położenia, połączenie internetowe jest poprzez wifi, próbowałem na paru przeglądarkach i nic. Jeśli chodzi o wklejenie kodu to spróbowałem najpierw z opisówki cz.1 potem zobaczyłem kolejne i co jedynie wyszło z pinezkami to w cz.3 gdzie na twardo podał Pan położenia
Nie mam aktualnie tego projektu u siebie na komputerze, więc nie mam jak Ci podesłać działającego przykładu. Podejrzewam, że problem tkwi w tym, że w jednym przypadku marker ma postać ludzika, który jest ładowany z pliku graficznego. Jedyne co w tej chwili mi przychodzi do głowy. Sorry, że dopiero odpisuje na komentarz, ale WordPress mnie o nim nie powiadomił :/