
Dziś mały tutorial z praktycznym przykładem pokazującym jak korzystać z map Google w aplikacji jQuery Mobile.
Tutorial jQuery Mobile – praca z Google Maps
Tworzymy zatem naszą aplikację, a zaczniemy od dołączenia potrzebnych plików. Oprócz jQuery i jQuery Mobile, potrzebujemy dołączyć skrypt z kodem JavaScript, w którym zaimplementujemy naszą obsługę map. Ponadto potrzebujemy skryptów Google Maps API:
<script type="text/javascript" src="jqm_maps_app.js"></script> <script src="http://maps.google.com/maps/api/js?sensor=false"> </script>
Zdefiniujmy także style, które rozciągną mapę na całej stronie:
#map-page, #map-area { width: 100%; height: 100%; padding: 0; }
Następnie dodajemy kod HTML strony (page), na której będzie umieszczona mapa:
<div data-url="map-page" data-role="page" id="map-page"> <div data-role="header" data-theme="a"> <h1>Maps App</h1> </div> <div role="main" class="ui-content" id="map-area"> <!-- map will be here --> </div> </div>
Zajmijmy się teraz właściwym kodem JavaScript.
W naszym pliku jqm_maps_app.js umieszczamy kod jak poniżej:
$(document).on("pageinit", "#map-page", function() { var defaultLatLng = new google.maps.LatLng(52.5242680, 13.4062900); // default: Berlin drawMap(defaultLatLng); // show default map function drawMap(latlng) { var myOptions = { zoom: 10, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document. getElementById("map-area"), myOptions); // add an overlay to the map var marker = new google.maps.Marker({ position: latlng, map: map, title: "Hello!" }); } });
Przykład działania kodu:
Kod obsługuje zdarzenie $(document).on(„pageinit”, …), w którym najpierw ustawiamy domyślną długość i szerokość geograficzną.
Następnie wywołujemy funkcję drawMap(), która centruje widok mapy na punkcie reprezentowanym przez te współrzędne. W samej funkcji natomiast następuje ustawienie opcji mapy, narysowanie jej na zadanym elemencie HTML oraz dodanie markera.
W przykładzie domyślnie podane są współrzędne Berlina. Takie informacje można bez problemu znaleźć w Google.
Detekcja współrzędnych
Możemy także zaprogramować próbę pobrania lokalizacji użytkownika.
Wystarczy tę linijkę:
drawMap(defaultLatLng); // show default map
zastąpić poniższym kodem:
... if (navigator.geolocation) { function success(pos) { // location found - show map with these coordinates drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude)); } function fail(error) { drawMap(defaultLatLng); // failed - show default map } // find the user's current position; cache the location for // 5 minutes, timeout after 6 seconds navigator.geolocation.getCurrentPosition(success, fail, { maximumAge: 500000, enableHighAccuracy: true, timeout: 6000 }); } else { drawMap(defaultLatLng); // no geolocation support }
Kod ten odczytuje bieżącą lokalizację użytkownika, jeżeli jest to możliwe.
I to właściwie wszystko. Na mapach Google możemy operować dowolnie, według możliwości udostępnianych przez API.
Przykład online dostępny tutaj:
http://directcode.eu/samples/jquery_mobile_maps/jqm_maps_app.html
Źródła do pobrania:
http://directcode.eu/samples/jquery_mobile_maps/jquery_mobile_maps.zip
Zasoby
Google Maps documentation:
http://code.google.com/apis/maps/documentation/javascript/basics.html
Geolocation documentation:
http://dev.w3.org/geo/api/spec-source.html
Podsumowanie
W poprzednich artykułach poznaliśmy możliwości oferowane przez jQuery Mobile. Ten mały tutorial pokazuje, jak dobrze biblioteka ta współpracuje z mapami Google.
Dziękuję za uwagę.