Strona główna > Google, KML > Osadzanie pliku KML w Google Maps

Osadzanie pliku KML w Google Maps

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&amp;v=2&amp;sensor=false&amp;key=…&#8221;

// 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&#8221;);

// 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.

Reklamy
Kategorie:Google, KML
  1. Brak komentarzy.
  1. No trackbacks yet.

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Wyloguj / Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Wyloguj / Zmień )

Zdjęcie na Facebooku

Komentujesz korzystając z konta Facebook. Wyloguj / Zmień )

Zdjęcie na Google+

Komentujesz korzystając z konta Google+. Wyloguj / Zmień )

Connecting to %s

%d blogerów lubi to: