www.gmapsapi.com

Kompleksowy kurs podstaw API, po którym mapowianie nie będzie miało przed Tobą żadnych tajemnic!

Setki przykładów, kursów i poradników z kodem gotowym do skopiowania i korzystania.

Największa strona o Google Maps API w Polsce, największe źródło informacji w języku polskim.

Synchronizacja map

Ten artykuł dotyczy API w wersji 2

« powrót do listy poradników

W tej części kursu dowiesz się, jak zsynchronizować ze sobą dwie mapy. Zmieniając obszar widzenia na jednej, wykonamy automatycznie to samo na drugiej mapie. W ten sposób można wykonać własną minimapę, zamiennik wbudowanej kontrolki.

Zaczynamy

Potrzebne będą dwa elementy, w których będzie mapa:

<div id='mapka1' style='float: left; width: 140px; margin-top: 360px; height: 140px; border: 1px solid black; background: gray;'></div>
<div id='mapka2' style='margin-left: 200px; width: 500px; height: 500px; border: 1px solid black; background: gray;'></div>

W kodzie javascript stworzymy dwa globalne obiekty map, przypisane do obu kontenerów:

mapa1 = new GMap2(document.getElementById("mapka1"));
mapa2 = new GMap2(document.getElementById("mapka2"));
var punkt = new GLatLng(53.429805, 14.537883);
mapa1.setCenter(punkt, 3, G_SATELLITE_MAP);
mapa2.setCenter(punkt, 7, G_HYBRID_MAP);

Obie mapy centrujemy w tym samym punkcie, przy czym jedną na niższym poziomie zbliżenia i zdjęciem satelitarnym, drugą na nieco większym przybliżeniu ale z mapą hybrydową.

Zdarzenia

Na początku kodu trzeba zadeklarować dwie globalne zmienne ruchMapa1 i ruchMapa2. Jest to istotne, ponieważ zdarzeniem, które będziemy obsługiwać będzie move. W czasie wystąpienia tego zdarzenia będziemy przesuwać także drugą mapę, lecz odpowiednie ustawienie zmiennej ruchMapa1 lub ruchMapa2 będzie informowało program, która mapa jest przesuwana przez użytkownika, zapobiegając wykonywaniu zwrotnego zdarzenia move dla sąsiedniej mapy. Przykładowo:

GEvent.addListener(mapa1,'move',function()
{
	ruchMapa1 = true;
	if(!ruchMapa2)
		mapa2.setCenter(mapa1.getCenter(),mapa2.getZoom());	
	ruchMapa1 = false;
	
	marker.setPoint(mapa1.getCenter());
});
GEvent.addListener(mapa2,'move',function()
{
	ruchMapa2 = true;
	if(!ruchMapa1)
		mapa1.setCenter(mapa2.getCenter(),mapa1.getZoom());
	ruchMapa2 = false;
});

Przy poruszaniu mapą 1 (niezależnie, czy zdarzenie zostało odpalone bezpośrednio przez użytkownika poprzez np. przesunięcie mapy1, czy też pośrednio poprzez przesunięcie mapy2) będziemy uaktualniali pozycję pewnego markera w kształcie lupy, który będzie efektownie pokazywał miejsce, wskazywane przez dużą mapę. Obrazek markera wygląda następująco:

lupa

Oto kod, odpowiedzialny za jego stworzenie:

// ikonka
var lupa = new GIcon();
lupa.image = '/examples/018/lupa.png';
lupa.shadow = '';
lupa.iconSize = new GSize(32,32);
lupa.shadowSize = new GSize(0,0);
lupa.iconAnchor = new GPoint(12,11);
lupa.infoWindowAnchor = new GPoint(12,11);

// lupka
marker = new GMarker(punkt,{icon: lupa, clickable: false});
mapa1.addOverlay(marker);

Blokujemy możliwość klikania na marker, by po najechaniu myszką na jego ikonkę nie zmieniał się kursor. Obiekt marker musi być globalny!

Zobacz działanie map i pełny kod przykładu: przykład 1pokaż kod przykładu

Polecane artykuły

Dodaj stronę do ulubionego serwisu społecznościowego

Oto, co najczęściej czytają internauci, którzy przeczytali ten artykuł:

Dodawanie markerów przez użytkownika

API v2

Poradnik pokazuje, w jaki sposób stworzyć formularz, pozwalający na dodawanie markerów


Wczytywanie danych z programu MS Excel

API v2

W tym przykładzie pokazane zostało, w jaki sposób wyświetlić markery z arkusza kalkulacyjnego


Własna mapa w Google Maps API

API v2

Przygotowanie i sposób stworzenia własnej mapy, na przykładzie mapy z gry GTA3


Warstwa zdjęć z Panoramio

API v2

Dodaj na swoją mapę eleganckie miniaturki zdjęć okolicy z serwisu Panoramio