NEXT 4/2009 - Mapa na twojej witrynie

Dzięki interfejsowi API do Google Maps możesz nie tylko umieścić okno z mapką na własnej stronie, ale także dopasować jego wygląd oraz uzupełnić treść kartograficzną o dane z innych źródeł. Pokazujemy krok po kroku, jak to zrobić.

Geo Finder – generator skryptów

Geo Finder to skrypt opracowany specjalnie dla tych internautów, którzy chcą zamieścić mapę na własnej stronie WWW, a nie znają JavaScript i Google Maps API. Wystarczy ustawić parametry mapy i pobrać skrypt gotowy do wklejenia na swoją witrynę. Do dyspozycji masz geolokalizację, współrzędne GPS oraz zdefiniowanych ponad 200 regionów świata. Wystarczy podać adres lub współrzędne geograficzne i wyklinać resztę ustawień. Podczas tworzenia własnej mapy masz podgląd, jak będzie wyglądać efekt końcowy. Do poprawnego działania mapy na swojej stronie potrzebny jest klucz-kod generowany dla każdej strony indywidualnie (www.google.com/apis/maps/signup.html).

Google Maps API to sposób na osadzenie map znanych z serwisu Google Maps na własnej stronie internetowej. Jest to zestaw klas języka JavaScript, który można wykorzystać do komunikacji z serwerami map Google. Pozwala nie tylko na dodawanie map do dowolnych stron internetowych, ale także ich dopasowanie do własnych potrzeb. Programista poprzez manipulację API może wpływać na wiele parametrów wyświetlanych map: od sterowania skalą, poprzez ustawianie punktów użytkownika, aż do złożonych operacji łączących kilka serwisów internetowych (na przykład mapę z Google wraz z prognozą pogody z innego źródła) w jeden serwis, tzw. mashup.

Do efektywnej pracy z Google Maps API niezbędna jest wiedza programistyczna. Do podstawowych zastosowań wystarczy jednak kreator wyszukiwarki (www.google.com/uds/solutions/wizards/mapsearch.html). Za jego pomocą można w bardzo prosty sposób wygenerować kod potrzebny do osadzenia mapy na własnej stronie.

Mapa z kreatora

W pierwszej części kreatora (Customize it) określ wyjściową szerokość i wysokość mapy w pikselach (odpowiednio Map width oraz Map height). Następnie wybierz skalę mapy (Map zoom) od najmniej dokładnego poziomu miasta (City level), poprzez poziom ulicy (Street map), aż do najdokładniejszego poziomu budynku (Block level). Kolejne dwa pola tekstowe służą do określenia dymku, jaki pojawi się nad podaną lokalizacją. Najpierw zdefiniuj nazwę lokalizacji oraz jej URL (odpowiednio Center location name i Center location link URL). Ostatnie pole służy do wprowadzenia frazy, która posłuży ci do wyszukania określonej lokalizacji.

Zdaniem redaktora

Marcin Kawalerowicz redaktor działu Internet Wspaniałym źródłem wiadomości o Google Maps API jest Google AJAX APIs Playground (http://code.google.com/apis/ajax/playground/?exp=maps), za pomocą którego można interaktywnie pobawić się różnymi funkcjami interfejsu map. Plac zabaw podzielony jest na trzy obszary. W pierwszym wybierasz interesującą cię funkcję, w drugim edytujesz przykładowy kod źródłowy, a w trzecim widzisz wyniki swoich działań. Dzięki temu w interaktywny sposób można doskonalić umiejętności programowania map na swoich stronach.

Musi być ona adresem w znanym z Google Maps formacie (jedna linia tekstu, kolejne człony adresu oddzielone przecinkami). Spróbuj wygenerować w ten sposób mapę dowolnego miejsca. Gdy wszystko jest gotowe, można podejrzeć wynik końcowy (Preview center location).

W drugiej części kreatora (Tell us about your web site) podaj adres strony internetowej, na której chcesz umieścić mapę. To ważny krok, ponieważ Google wymaga użycia specjalnego kodu dostępowego we wszystkich zapytaniach kierowanych poprzez API do serwisu Maps. Klucz ten zostanie stworzony automatycznie i umieszczony w wygenerowanym kodzie źródłowym, który stworzysz poprzez naciśnięcie przycisku Generate Code w trzeciej części kreatora (Generate code for your web page).

Wspomniany klucz do Google Maps API jest spersonalizowany, więc aby go wygenerować, trzeba zalogować się z użyciem własnego konta Gmail. Jeśli go nie masz, to je załóż. Po chwili kreator wygeneruje i przedstawi w ramce gotowy kod źródłowy, który należy skopiować i wkleić do pliku strony internetowej (na potrzeby testu może być to dowolny plik z rozszerzeniem html – wygenerowany kod umieść w znaczniku <body>).

Ocena:    (aby ocenić, musisz się zalogować w serwisie)

 del.icio.us |  Wykop mnie |  Digg this story |  dodajdo.com

• Rysuj na Google Maps »
  internetowy edytor map
• Szablony .NET »
  prezentacja szablonów w Windows Presentation Foundation
• Google fotografuje Polaków »
  jak powstaje Google StreetView
• Konfiguracja systemu »
  Windows 7 instalacja i spolszczenie
• Silverlight dla każdego »
  tworzenie aplikacji za pomocą narzędzia Silverlight