Moduł HTML::GoogleMaps
Uniwersytet Gdański - Instytut Matematyki - Zakład Informatyki - Strona domowaSpis treści
Obsługa modułu HTML::GoogleMaps
Co to jest
HTML::GoogleMaps to moduł autorstwa Nate Mueller'a , opakowujący Google Maps API. Na początek trochę historii - w 2005 r. firma Google udostępniła serwis http://maps.google.com, otworzyła tym samym nowy rozdział w rozwoju kartografii internetowej. Mapa świata zintegrowana z wyszukiwarką tworzy nową jakość dla wyszukiwania informacji. Oczywiste jest, że najlepiej system rozwija się w USA, ale z Google Maps API korzystają webmasterzy z całego świata. Za pomocą naszego modułu w prosty i przejrzysty sposób możemy umieścić dowolną mapkę na naszej stronie internetowej. Dzięki niemu możemy tworzyć mapy z markerami, liniami jak również informacyjnymi okienkami. Dzięki Geo::Coder::Google możemy przeglądać różne miejsca na świecie bez potrzeby instalowania bazy danych.
Przykładowa mapa Egiptu z GoogleMaps.
Download
- Pakiet możemy pobrać z CPANu
Zależności
- Wymagana jest instalacja modułu Geo::Coder::Google 0.02
Instalacja w systemie UNIX'owym
Po rozpakowaniu modułu wydajemy polecenia
perl Makefile.PL
make
make install
Jeżeli wszystko poszło zgodnie z planem to możemy już korzystać z możliwości naszego nowego modułu. Sprawdzić, czy został pomyślnie zainstalowany możemy pisząc chociażby takiego jednolinijkowca:
perl -e 'use HTML::GoogleMaps'
Pomyślne wykonanie programu (żadnych komunikatów) daje nadzieję, że moduł jest zainstalowany i będzie działał.
Google Maps API Key
Pierwszym etapem w tworzenu naszej mapki jest uzyskanie unikatowyego identyfikatora Google Maps. Otwieramy stronę www.google.com/apis/maps. Klikamy na odnośnik Sign up for a Google Maps API key. Po zapoznaniu się z warunkami korzystania z funkcji udostępnianych przez Google podajemy adres strony (My web site URL) i klikamy przycisk Generate API key. Na kolejnej stronie zostanie podany długi ciąg znaków, służący do identyfikacji witryny korzystającej z wyświetlania mapy.
Konstruktor
Korzystając z naszego identyfikatora ($map_key), możemy utworzyć obiekt HTML::GoogleMaps:
$map = HTML::GoogleMaps->new(key => $map_key);
Dostępne metody
- $map->center($point) Wycentrowuje mapę na danym punkcie.
$map->v2_zoom($level) Ustawia poziom zooma.
$map->controls($control1,$control2) Ustawia dodatkowe opcje kontroli nad mapą. Dostępne opcje to large_map_control, small_map_control, small_zoom_control, map_type_control.
$map->dragging($enable) Ustawienie możliwości przesuwania mapy, domyślnie włączone.
$map->info_window($enable) Włączenie lub wyłączenie okienka informacyjnego, domyślnie włączone.
$map->map_type($type) Ustawienie typu mapy. Dostępne opcje to normal, satellite lub hybrid.
$map->map_id($id) Ustawienie identyfikatora dla sekcji div mapy.
$map->add_icon(name => $icon_name, image => $image_url, shadow => $shadow_url, image_size => [ $width, $height ], shadow_size => [ $width, $height ], icon_anchor => [ $x, $y ], info_window_anchor => [ $x, $y ]) Dodaje nową ikonkę, którą możemy potem użyć przy dodawaniu markera.
$map->add_marker(point => $point, html => $info_window_html) Dodanie markera do mapy w danym punkcie, html dodaje informacyjne okienko popup po kliknięciu na marker.
$map->add_polyline(points => [ $point1, $point2 ], color => $color, weight => $weight, opacity => $opacity) Dodaje linię, która łączy poszczególne punkty. Jak nie trudno się domyślić opcja koloru ustawia kolor linii, weight grubość w pikselach, a opacity przezroczystość (zakres [0,1]).
$map->render Renderuje mapę oraz zwraca listę złożoną z trzech elementów. Pierwszy element umieszczamy w sekcji HEAD naszego dokumentu, drugi i trzeci umieszczamy w sekcji BODY.
Przykład
Przypuścmy, że mieszkamy w akademiku i chcemy narysować mapę dla kolegi z pokoju obok, który dopiero rozpoczął studia i niestety nie zna drogi na stację BP (a akurat w nocy skończyły mu się chipsy ;P). Mapa ma przedstawiać drogę z akademika do upragnionego celu wielu nocnych, studenckich podróży.
Przykładowy program wykorzystujący nasz moduł mógłby wyglądać tak
use strict;
use HTML::GoogleMaps;
my $map_key="ABQIAAAAfFkhl3RgTEp8RG_TF_6xvxR4VzexcrSeXpLvnYLHCIg3JhiW-RQ00FtXhdvTKbE1HwdIx6bBhHPkFw"; #nasz klucz
my $map = HTML::GoogleMaps->new(key => $map_key);
$map->map_type("normall");
$map->controls("large_map_control","map_type_control");
$map->v2_zoom(15);
$map->center("Wita Stwosza 56, Gdańsk");
$map->add_marker(point => "Macierzy Szkolnej 4, Gdańsk",html => "Tutaj startujesz");
$map->add_marker(point => "Wita Stwosza 56, Gdańsk",html => "Przy przechodzeniu przez torowisko uwazaj na POLICJE ! :D");
$map->add_marker(point => "Bażyńskiego 1, Gdańsk",html => "Idziesz w strone Mcdonaldsa xD");
$map->add_marker(point => "Grunwaldzka 270, Gdańsk",html => "Jeśli widzisz sklep nie dla idiotow to widzisz również BP :)");
$map->add_polyline(points => [ "Macierzy Szkolnej 4, Gdańsk", "Wita Stwosza 56, Gdańsk","Bażyńskiego 1, Gdańsk","Grunwaldzka 270, Gdańsk" ],color=>"cyan",weight=>2);
my ($head, $map_div, $map_script) = $map->render;
printf "SEKCJA HEAD:\n$head\n\n";
printf "SEKCJA BODY:\n$map_div\n\n";
printf "SEKCJA BODY::JAVASC:\n$map_script\n";
Po uruchomieniu naszego programu otrzymamy na ekranie
SEKCJA HEAD:
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAfFkhl3RgTEp8RG_TF_6xvxR4VzexcrSeXpLvnYLHCIg3JhiW-RQ00FtXhdvTKbE1HwdIx6bBhHPkFw" type="text/javascript"></script>
SEKCJA BODY:
<div id="map" style="width: 600px; height: 400px"></div>
SEKCJA BODY::JAVASC:
<script type="text/javascript" />
//<![CDATA[
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(54.397121, 18.570146));
map.setZoom(15);
map.setMapType(G_NORMAL_MAP);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
var marker_1 = new GMarker(new GLatLng(54.394689, 18.568898) );
GEvent.addListener(marker_1, "click", function () { marker_1.openInfoWindowHtml('<div style="width:350px;height:200px;">Tutaj startujesz</div>'); });
map.addOverlay(marker_1);
var marker_2 = new GMarker(new GLatLng(54.397121, 18.570146) );
GEvent.addListener(marker_2, "click", function () { marker_2.openInfoWindowHtml('<div style="width:350px;height:200px;">Przy przechodzeniu przez torowisko uwazaj na POLICJE ! :D</div>'); });
map.addOverlay(marker_2);
var marker_3 = new GMarker(new GLatLng(54.400231, 18.571995) );
GEvent.addListener(marker_3, "click", function () { marker_3.openInfoWindowHtml('<div style="width:350px;height:200px;">Idziesz w strone Mcdonaldsa xD</div>'); });
map.addOverlay(marker_3);
var marker_4 = new GMarker(new GLatLng(54.398724, 18.575861) );
GEvent.addListener(marker_4, "click", function () { marker_4.openInfoWindowHtml('<div style="width:350px;height:200px;">Jeśli widzisz sklep nie dla idiotow to widzisz również BP :)</div>'); });
map.addOverlay(marker_4);
var polyline_1 = new GPolyline([new GLatLng(54.394689, 18.568898), new GLatLng(54.397121, 18.570146), new GLatLng(54.400231, 18.571995), new GLatLng(54.398724, 18.575861)], "cyan", 2, 0.5);
map.addOverlay(polyline_1);
}
//]]>
</script>
Wystarczy teraz umieścić te dane w odpowienich miejscach naszego dokumentu, aby cieszyć się wspaniałą mapką.
A oto wynik naszej misternej pracy
Dodatkowe informacje
Ciekawym zastosowaniem tego modułu mogłoby być np. odbieranie adresów IP odwiedzających naszą stronę (Moduł Geo::IP2Location), następnie pobranie informacji o danym adresie oraz umieszczenie miejscowości za pomocą markerów na mapce.
- Macierzysta strona dokumentacji do modułu http://search.cpan.org/~nmueller/HTML-GoogleMaps-6/lib/HTML/GoogleMaps.pm
- Mapki Google http://maps.google.com/
Autor opracowania
Adrian Sielski
Email: adrian.sielski@gmail.com