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: przykład 1pokaż kod przykładu

Zwróć uwagę, że dla celów demonstracyjnych na mapie pojawia się czerwony prostokąt, który zawsze obejmuje swoim obszarem wszystkie markery i jest zagwarantowane, że wywołanie metody fitBounds wyświetli zawsze ten prostokąt w całości. Dodanie prostokąta jest trywialne:

var prostokat = new google.maps.Rectangle({
	strokeColor: '#ff0000',
	strokeWeight: 3,
	strokeOpacity: 0.4,
	bounds: obszar,
	map: mapa,
	fillColor: '#ff0000',
	fillOpacity: 0.1
});

Uwagi

Może zdarzyć się, że widoczny obszar po dopasowaniu będzie nieco większy, aniżeli realny obszar, zajmowany przez markery. Nie jest to błąd, tylko problem wynikający z trzech faktów:

  • małe kawałki z których składa się mapa mają stałą szerokość i wysokość oraz nie są skalowalne,
  • zoom w API webowym jest skokowy, a nie ciągły (jak np. w Google Earth),
  • obszar pokrywający markery ma przeważnie inne proporcje niż główna mapa.

Polecane artykuły

Dodaj stronę do ulubionego serwisu społecznościowego

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

Dodawanie znaczników na mapę

API v3

Kurs podstaw cz. II: Podstawowe informacje na temat wstawiania markerów (znaczników)


Kategorie markerów i polilinii

API v3

Stwórz markery/polilinie w kilku kategoriach, a następnie ukrywaj i pokazuj wybrane kategorie


Pogoda na mapie

API v3

Jak wyświetlić stan pogody przy użyciu Google Maps API?


Popularne, darmowe ikony dla markerów

API v3

Kurs podstaw cz. IV: Lista darmowych ikon do wykorzystania w Twojej aplikacji mapowej