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: