Jak wykorzystać dobrodziejstwa, map oraz zdjęć satelitarnych serwowanych przez gigantów Google (
GoogleMaps) i Microsoft (
VirtualEarth). Postaram się przybliżyć obydwie technologie.
Na początek jak umieścić mapę z Google Maps na swojej stronie. Co będzie nam potrzebne:
- jakiś edytor do htmla (polecam Notepad++)
- tzw. APIkey
APIkey jest ciągiem znaków, którego znaczenie zna chyba tylko samo Google, ale bez tego ciągu znaczków nie będziemy mogli korzystać z map. Ciąg ten generuje się na podstawie adresu strony na której umieścimy naszą mapę, jednak ważna jest tylko domena. Więc jak mamy stronę umieszczoną pod adresem http://example.org/moja/strona to generujemy klucz dla http://example.org i klucz będzie ważny dla wszystkich stron umieszczonych na serwerze http://example.org. Klucz ten
generujemy na stronie.
Następnie tworzymy prosty
dokument html.
Teraz podmieniamy klucz API na nasz:
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdef"
type="text/javascript"></script>
Jeżeli jesteśmy leniwi, na stronie z kluczem, niżej jest już wygenerowany kompletny kod, wraz z kodem API.
Jak to działa.
Najważniejsza część to funkcja Load(). W niej tworzona jest nowa mapa:
function load()
{
if (GBrowserIsCompatible())
{
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(52.200874, 19.445801), 6);
}
}
Argumentem konstruktora jest odniesienie do elementu div umieszczonego między <body></body>. Natomiast metoda setCenter() ustawia mapę na określonych przez obiekt klasy GLatLong współrzędnych. kolejny argument to powiększenie, w tym przypadku 6. Wraz ze wzrostem tej wartości wzrasta szczegółowość map. Funkcja Load() jest wywoływana w zdarzeniu onLoad:
<body onload="load()" onunload="GUnload()">
GUnload() zapewnia zwolnienie wszelkich zajętych zasobów zapobiegając wyciekom pamięci (tzw. memory leaks).
W następnym odcinku będzie o tym jak dodać standardowe elementy do obsługi mapy.
