ZAWWW-2st1.2-l13.tresc-1.0

Z Studia Informatyczne
Przejdź do nawigacjiPrzejdź do wyszukiwania

Zaawansowane aplikacje internetowe

AJAX 2

Celem tego laboratorium jest przybliżenie jednego z najbardziej znanych zastosowań technologii AJAX - Google Maps. W ramach ćwiczeń zostanie zbudowana prosta aplikacja, wyświetlająca mapę pewnego obszaru, a następnie mapa ta zostanie wzbogacona o pewne interaktywne elementy.

Do opracowania ćwiczeń wystarczy dowolny edytor tekstowy (znacznym ułatwieniem jest kolorowanie składni języka HTML, ale nie jest to wymagane). Powstające w trakcie ćwiczeń pliki można umieszczać w dowolnym katalogu na dysku twardym komputera osobistego lub serwera i otwierać przy pomocy prawie dowolnej przeglądarki graficznej (ograniczenia wynikają głównie z braku, lub słabego wsparcia danej przeglądarki dla technologii AJAX). Ważne jest też, aby w trakcie wykonywania ćwiczeń mieć dostęp do zasobów Gogle Maps (mieć aktywne połączenie z Internetem). Niektóre przeglądarki mogą wymagać od użytkownika potwierdzenia, iż użytkownik świadomie otwiera strony z aktywną zawartością.

Ćwiczenie 1

W tym ćwiczeniu zostanie przedstawiony prosty kod strony w języku HTML, wyświetlający mapę pewnego, ściśle określonego obszaru. Rozmiar i skala mapy także są tu dokładnie określone przez użytkownika.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&v=2"
            type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(52.4,16.95), 16);
      }
    }

    //]]>
    </script>
  </head>

  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 800px; height: 600px"></div>
  </body>
</html>

  • Po zapisaniu można otworzyć dokument w przeglądarce internetowej.

ZAWWW-2st1 2-l13 tresc-1 0 01.png

var map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(52.4,16.95), 16);

ZAWWW-2st1 2-l13 tresc-1 0 02.png

Ćwiczenie 2

Korzystając z właściwości Google Maps API należy przygotować mapę, na której znajdą się przynajmniej 2 interesujące punkty (np. uczelnia i starówka).

  • Linią ciągłą należy zaznaczyć drogę pomiędzy tymi punktami
  • Markerami zaznaczysz interesujące miejsca – muzea, teatry, .... Po kliknieciu na marker powinna się pojawiać krótka informacja o tym miejscu
  • W miejscu, w którym znajduje się siedziba interesującej firmy umieścisz jej logo
  • Chwilę po załadowaniu mapa zacznie się przesuwać tak, aby w jej środku znalazł się najpierw początek, a później koniec trasy.
Źródło: „https://wazniak.mimuw.edu.pl/index.php?title=ZAWWW-2st1.2-l13.tresc-1.0&oldid=52348”