Mashup z Google Maps
Opis ten zawiera wskazówki dotyczące dodawaniu map z witryny Google Maps do własnej strony
www z pominięciem języka PHP oraz bazy danych MySQL.
Na pierwszym etapie tworzenia witryny www naleŜy uzyskać unikatowy klucz Google Maps. W tym
celu w przeglądarce internetowej wpisujemy http://maps.google.com Po załadowaniu strony www,
wyszukujemy następującą treść „Dodaj Mapy Google do swojej witryny internetowej:
Więcej
informacji >>
”. Klikamy dzięki czemu przechodzimy do następnej strony gdzie odnajdujemy
„Ready to add maps to your public site?
Sign up now for free
.”. Klikamy przechodząc tym samym
do strony gdzie zaznaczamy pole przy „I have read and agree (…)”, podajemy adres internetowy
naszej strony i wciskamy ‘Generate API Key”.
Uwaga!!! JeŜeli nie moŜemy wykonać tych kroków to jesteśmy zmuszeni do załoŜenia konta Gmail
w Google.
Po wygenerowaniu klucza pokaŜe się nam następująca strona, która zawiera:
Unikatowy klucz (Your key is:)
Adres internetowy do którego odnosi się dany klucz (This key is good for all URLs in this
directory:)
Kompletny kod HTML strony (Here is an example web page to get you started on your way to
mapping glory:)
Teraz naleŜy przetworzyć powyŜszy kod do potrzeb własnej witryny. Otwieramy naszą stronę w
której chcemy umieścić mapę Google w edytorze HTML, np.: Nvu. Między znaczniki <head> i
</head> umieszczamy część wygenerowanego kodu HTML:
<script
src=”http://maps.google.com/maps?file=api&v=2&key=
Unikatowy klucz
type=”test/javascript”>
</script>
Unikatowy klucz
– w tym miejscu znajduje się klucz (key), który jest przypisany do określonej
strony, w tym przypadku jego wartość wynosi:
ABQIAAAAF3RVMxc2LejVwWHfsERgNxQoJ_S0lqDbuWuTAXkLrrW-
6c54xSW82UkLcVJc1S2CD2YllMXZopFCw
Do znacznika <body> naszej strony dodajemy następujące wartości:
onload=”load( )” onunload=”GUnload( )”
Dzięki czemu wiersz z znacznikiem będzie wyglądał tak:
<body onload=”load( )” onunload=”GUnload( )”>
W miejscu naszej strony gdzie chcemy umieścić mapę wpisujemy wyraŜenie:
<div id=”map” style=”width:
500
px; height:
300
px”></div>
500
– szerokość okna z mapą;
300
– wysokość okna z mapą.
Teraz moŜemy umieścić skrypt Javy. MoŜna go umieścić między znacznikami <head> i </head> jak
widać na rysunku 4. Ja jednak umieszczam ten skrypt między znacznikami <body> i </body> tuŜ
przed linią zawierającą znaczniki <div> i </div>.
Umieszczenie tego skryptu pozwoli nam wyświetlić mapę z Google Maps.
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(
52.192613933460315
,
-1.706399917602539
),
13
);
}
}
//]]>
</script>
52.192613933460315
– współrzędna geograficzna;
-1.706399917602539
– współrzędna geograficzna;
13
– stopień powiększenia mapy.
Współrzędne geograficzne mapy jaką chcemy wyświetlić na naszej stronie www moŜemy uzyskać
posługując się serwisem http://web4you.com.pl i odnośnikiem znajdującym się po lewej stronie
serwisu
Współrzędne w Google Maps
.
Współrzędne geograficzne zapisywane w skrypcie (co widać powyŜej) naleŜy zapisywać w takiej
postaci w której minuty zapisywane są w postaci dziesiętnej części stopnia, czyli np.:
N: 52° 10' 26" - 52.192613933460315
E: 18° 51' 9" - -1.706399917602539
Oto wynik jaki otrzymamy po umieszczeniu naszej strony www na serwerze:
PoniŜej jest pokazana ta sama mapa (o tych samych współrzędnych geograficznych), ale o
zmienionej wartości powiększenia mapy. Teraz wartość ta wynosi 15 (wcześniej wynosiła 13):
Teraz zajmiemy się elementami nawigacyjnymi mapy. Mapę jaką widzimy powyŜej moŜemy na
naszej stronie przesuwać w poziomie i pionie przez chwytanie i poruszanie myszką. MoŜna jednak
dodać do naszego skryptu elementy nawigacyjne, np.:
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.setCenter(new GLatLng(52.192613933460315, -1.706399917602539),
13
);
}
}
//]]>
</script>
map.addControl(new GLargeMapControl());
- manipulator z suwakiem zoom;
Oto wynik jaki otrzymamy po umieszczeniu naszej strony www na serwerze:
map.addControl(new GSmallMapControl());
- manipulator z klawiszami zoom;
map.addControl(new GSmallZoomControl());
- tylko klawisze zoom;
W pozostałej części opisu będzie uŜywany w skrypcie tylko klawisz zoom (ostatni przypadek).
Teraz do naszej mapy dodamy widok ogólny mapy i lupę (umieszczone jest to w naszej mapie w
prawym dolnym rogu) oraz skalę – podziałkę mapy, a takŜe moŜliwość wyboru rodzaju map
(Mapa, Satelitarna, Hybrydowa).
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallZoomControl());
map.addControl(new GOverviewMapControl());
map.addControl(new GScaleControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(52.192613933460315, -1.706399917602539),
13
);
}
}
//]]>
</script>
map.addControl(new GOverviewMapControl());
- widok ogólny mapy i lupa;
map.addControl(new GScaleControl()); -
skala (podziałka mapy);
map.addControl(new GMapTypeControl());
- rodzaje map.
Oto wynik jaki otrzymamy na stronie:
W pozostałej części opisu nie będzie uŜywany widok ogólny mapy i lupa oraz skala (podziałka
mapy) i rodzaj map.
Obecnie zajmiemy się dodawaniem pojedynczego markera do naszej mapy. Marker to nic innego
jak zaznaczenie danego punktu na mapie. KaŜdy marker moŜe być elementem aktywnym klikniecie
którego spowoduje wyświetlenie efektownego pola komentarza - "chmurki" z opisem, zdjęciami itp.
Jednak w tym celu musimy zmienić nieco nasz skrypt Java, który przyjemnie następującą postać:
//<
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(info);
});
map.addOverlay(marker);
}
}
//]]>
52.192613933460315
,
-1.706399917602539
,
13
– współrzędne geograficzne i stopień powiększenia
mapy (opisany na drugiej stronie);
Guild Chapel
– opis jaki będzie widoczny po kliknięciu na marker;
52.190594787878474
,
-1.707923412322998
– współrzędne geograficzne markera.
Teraz nasza mapa będzie wyglądała następująco:
Zmienna info (var info) moŜe zawierać kod HTML formatowany przez style CSS. Kod ten naleŜy
umieścić między znacznikami <div> i </div>, np.:
<DIV>
<B><I>Guild Chapel</I><BR>
Warwickshire<BR>
Stratford Upon Avon CV37 6EP<BR>
Chapel Ln.</B>
</DIV>";
<DIV>
<B><I>Guild Chapel</I></B><BR>
<IMG src='http://www.stratford.cba.pl/logo/guild10080.jpg' border=1>
</DIV>
Do powyŜszego przypadku (chmurka ze zdjęciem) kod skryptu wygląda następująco:
//<![CDATA[
var lat=52.192613933460315;
var lng=-1.706399917602539;
var zoom=13;
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallZoomControl());
map.setCenter(new GLatLng(lat, lng), zoom);
var info = "<div><B><I>Guild Chapel</I></B><BR><IMG src='http://www.stratford.cba.pl/logo/guild10080.jpg'
border=1></div>";
var point = new GLatLng(52.190594787878474, -1.707923412322998);
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(info);
});
map.addOverlay(marker);
}
}
//]]>
Do prezentacji większej ilości danych w polu komentarza wyświetlanego przy markerze moŜna
wprowadzić zakładki. Ich ilość jest dowolna. Dla przykładu będą pokazane trzy zakładki (kod
skryptu odpowiadający zakładkom jest zaznaczony na
czerwono
). Markerem jednak są w tym
przypadku współrzędne geograficzne mapy.
//<![CDATA[
var lat=52.192613933460315;
var lng=-1.706399917602539;
var zoom=15;
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallZoomControl());
map.setCenter(new GLatLng(lat, lng), zoom);
var infoTabs = [
new GInfoWindowTab("Guild 1", "1<BR><B>Bridge Street<B><BR><I>Stratford Upon
Avon</I>"),
new GInfoWindowTab("Guild 2", "2<BR><B>Bridge Street<B><BR><I>Stratford Upon
Avon</I>"),
new GInfoWindowTab("Guild 3", "3<BR><B>Bridge Street<B><BR><I>Stratford Upon
Avon</I>")
];
var marker = new GMarker(map.getCenter());
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowTabsHtml(infoTabs);
});
map.addOverlay(marker);
}
}
//]]>
Oto wynik naszych działań:
MoŜemy teraz przejść do zmiany ikony markera. KaŜdy marker składa się z dwóch plików
graficznych:
markiera
i
cienia
. JeŜeli chcemy uzyskać przezroczystość naleŜy stosować format
graficzny png. W tym przykładzie posłuŜymy się udostępnionym przez Google wzorem
minimarkera.
Więcej ikon jakie udostępnia Google na swoich serwerach moŜemy zobaczyć na stronie internetowej
http://web4you.com.pl klikając na odnośnik
Ikony do map
znajdujący się po lewej stronie.
//<![CDATA[
var lat=52.192613933460315;
var lng=-1.706399917602539;
var zoom=15;
function load() { if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallZoomControl());
map.setCenter(new GLatLng(lat, lng), zoom);
var icon = new GIcon();
icon.image =
"
http://labs.google.com/ridefinder/images/mm_20_red.png
";
icon.shadow = "
http://labs.google.com/ridefinder/images/mm_20_shadow.png
";
icon.iconSize = new GSize(
12
,
20
);
icon.shadowSize = new GSize(
22
,
20
);
icon.iconAnchor = new GPoint(
6
,
20
);
icon.infoWindowAnchor = new GPoint(5, 1);
var info = "<div><B><I>Guild Chapel</I></B><BR>Warwickshire<BR>Stratford Upon Avon
CV37 6EP</div>";
var point = new GLatLng(52.190594787878474, -1.707923412322998);
var marker = new GMarker(point, icon);
GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(info);
});
map.addOverlay(marker);
}
}
//]]>
http://labs.google.com/ridefinder/images/mm_20_red.png
- ścieŜka z obrazkiem markiera;
http://labs.google.com/ridefinder/images/mm_20_shadow.png
- ścieŜka z obrazkiem cienia markera;
12
,
20
– wielkość ikony (szerokość, wysokość);
22
,
20
– wielkość cienia jaki rzuca marker na mapę (wysokość, przesunięcie w osi y – w dół mapy);
6
,
20
– przesunięcie markera na mapie (w osi x – w lewo mapy, w osi y – w górę mapy);
Teraz nasz marker na mapie będzie wyglądał następująco:
Dla dalszego opisu zostaną zmienione wymiary mapy (500px na 500px) oraz stopień powiększenia
mapy na 14.
<div id=”map” style=”width: 500px; height: 500px”></div>
Zajmiemy się teraz dodawaniem większej ilości markerów. W tym celu dla kaŜdego nowego
markera musimy przypisać odpowiednie współrzędne geograficzne. Pomocną stroną będzie strona
internetowa http://web4you.com.pl i odnośnik
Współrzędne w Google Maps
. Na
czerwono
zaznaczono sześć markerów, chociaŜ na mapie widać jest tylko pięć.
//<
}
}
//]]>
Oto obraz mapy:
http://maps.google.com/
http://code.google.com/apis/maps/
http://web4you.com.pl
Mapa znajduje się na stronie http://www.stratford.cba.pl/atrakcje.html
Aktualny opis moŜna pobrać z adresu http://www.stratford.cba.pl/pdf/aktualny_mashup.pdf
Ver. 1.0
Luty 2008