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
Wyszukiwarka
Podobne podstrony:
Abolicja podatkowa id 50334 Nieznany (2)
4 LIDER MENEDZER id 37733 Nieznany (2)
katechezy MB id 233498 Nieznany
metro sciaga id 296943 Nieznany
perf id 354744 Nieznany
interbase id 92028 Nieznany
Mbaku id 289860 Nieznany
Probiotyki antybiotyki id 66316 Nieznany
miedziowanie cz 2 id 113259 Nieznany
LTC1729 id 273494 Nieznany
D11B7AOver0400 id 130434 Nieznany
analiza ryzyka bio id 61320 Nieznany
pedagogika ogolna id 353595 Nieznany
Misc3 id 302777 Nieznany
cw med 5 id 122239 Nieznany
D20031152Lj id 130579 Nieznany
mechanika 3 id 290735 Nieznany
więcej podobnych podstron