Tutorial jQuery Mobile: aplikacja z Google Maps

javascript-html5-tutorial.pl

5 kwietnia, 2014

Dominik-W

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