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.

Dostosowanie powiększenia do markerów

Ten artykuł dotyczy najnowszej wersji API

« powrót do listy poradników

Zazwyczaj mapy są wyświetlane na dużych poziomach przybliżenia, po to, by pokazywać wyraźnie szczegóły (np. ulice miasta). Jeśli na mapie znajduje się dużo markerów często znajdują się one poza aktualnie wyświetlanym obszarem. W tej części kursu napiszemy funkcję, która dobierze takie ustawienia mapy (wycentrowanie oraz przybliżenie) by wszystkie markery były naraz widoczne na ekranie.

Dzięki metodzie fitBounds() obiektu Map można automatycznie dopasować mapę do zadanego prostokąta

Metoda ta przyjmuje jeden argument w postaci prostokątnego obszaru - obiektu klasy LatLngBounds. Na początku działania naszej aplikacji należy go stworzyć, w miarę dodawania markerów będziemy go rozszerzać o nowe punkty. Po załadowaniu strony wykonujemy kod:

var obszar = new google.maps.LatLngBounds();

W trakcie dodawania markerów rozszerzamy prostokąt, definiowany przez obiekt klasy LatLngBounds metodą extend():

for(var i=0; i<6; i++)
{				
	// 6-krotnie dodajemy losowy marker
	var lat = 60-120*Math.random();
	var lng = 100-200*Math.random();
	var punkt = new google.maps.LatLng(lat, lng, true);
	var marker = new google.maps.Marker({ position: punkt });
	marker.setMap(mapa);
	
	// rozszerzamy obszar o dany punkt
	obszar.extend(punkt);
}

Kiedy wszystkie markery zostaną załadowane, dopasowujemy widzialny zakres mapy do naszego obszaru:

mapa.fitBounds(obszar);

I to wszystko :) Efekt działania dostępny jest w poniższym przykładzie, w którym na mapę dodane jest losowe 6 markerów, a następnie parametry mapy zostaną dobrane tak, by wszystkie zmieściły się w obszarze widzenia (spróbuj poodświeżać mapę kilka razy, by zaobserwować efekt: