Google Maps API (Application Programming Interface – interfejs programowania aplikacji) daje możliwość umieszczania map z serwisu Google Maps na prywatnych stronach internetowych. Każdy na swojej witrynie może bez większych problemów zamieścić dostosowaną do własnych potrzeb mapę. Dziś zaprezentuję co należy umieścić w kodzie strony internetowej, aby mapa z serwisu Google Maps wzbogaciła prywatną witrynę internetową. Sama mapa może jednak nie wystarczyć. Dlatego też pokażę ponadto w jaki sposób na tej mapie osadzić przykładowy plik KML (parę słów wstępu na temat KML), zawierający zdjęcia konkretnego użytkownika z serwisu Panoramio.
Uwaga:
// tak zaznaczone są komentarze mieszczące się w jednym wierszu
<!– a tak umieszczamy komentarze, które mogą zajmować kilka wierszy.
Tekst zawarty w komentarzu jest pomijany przez przeglądarkę i nie jest wyświetlany. Warto korzystać z komentarzy przy tworzeniu strony, ułatwiają bowiem poruszanie się po kodzie –>
Otwieramy plik strony zawierającej mapę.
W sekcji HEAD należy umieścić następujący kod:
<!– W miejscu … należy umieścić tzw. API key. Można go bezpłatnie wygenerować na tej stronie. W formularzu należy podać adres internetowy naszej strony na której chcemy zamieścić mapę. Jest to bardzo istotny element, bowiem bez tego klucza mapa nie zostanie wyświetlona w Internecie! Nie jest on niezbędny do wyświetlania stron znajdujących się na dysku komputera. –>
<script src=”http://maps.google.com/maps?file=api&v=2&sensor=false&key=…”
// początek skryptu napisanego w JavaScript
type=”text/javascript”>
// zdefiniowanie zmiennej map
var map;
// zdefiniowanie zmiennej geoXml
var geoXml;
// początek funkcji inicjalizującej mapę
function initialize() {
// sprawdzamy czy przeglądarka jest kompatybilna, jeśli tak to:
if (GBrowserIsCompatible()) {
// przypisujemy zmiennej map nowo utworzoną mapę, którą umieszczamy w elemencie blokowym o id = mapa
map = new GMap2(document.getElementById(“mapa”));
// zmiennej geoXml przypisujemy nowy obiekt – link do pliku KML, gdzie xxx = id użytkownika
geoXml = new GGeoXml(“http://www.panoramio.com/panoramio.kml?user=xxx”);
// współrzędne w których nastąpi wyśrodkowanie mapy – szerokość, długość, stopień powiększenia mapy
map.setCenter(new GLatLng(52.380300,15.489493), 13);
// dodajemy podstawowe przyciski – zoom, przesuwanie
map.addControl(new GLargeMapControl());
// nałożenie na mapę warstwy z KML
map.addOverlay(geoXml);
}
}
// koniec skryptu
</script>
W sekcji BODY należy umieścić:
// uruchomienie funkcji inicjalizującej mapę wraz z wczytaniem strony
<body onload=”initialize()”>
// wyświetlenie mapki w elemencie blokowym o szerokości 680 pikseli, wysokości 600 pikseli, czarnym obramowaniu o szerokości 1 piksela
<div id=”mapa” style=”width: 680px; height: 600px; border: 1px solid black;”></div>
</body>
Efekt końcowy:
Wszystkich zainteresowanych szerszymi możliwościami języka KML odsyłam to tutoriali przygotowanych przez Google
Dokumentacja KML w wersji 2.1 po polsku
Dokumentacja KML w wersji 2.2 po angielsku
I jeszcze jeden odnośnik wart polecenia – Poznaj Google Maps API, czyli zbiór porad, samouczków i przykładów zastosowań Google Maps API – po polsku.
