Wyśrodkowanie Google Maps na podstawie pozycji markerów
Korzystając z Google Maps dodajemy do niej zazwyczaj więcej niż jeden marker (punkt na mapie). Następnie chcemy, aby nasza mapa była wyśrodkowana względem tych wszystkich punktów. Na szczęście nie musimy obliczać tego sami. Google udostępnia nam narzędzie „bounds”. Jak z niego skorzystać dowiesz się z tego wpisu.
Podpinamy Google Maps
Na początku musimy podpiąć naszą mapę do strony:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Google Maps API</title>
</head>
<body>
<div id="map" style="height: 400px; width: 100%;"></div>
<script type="text/javascript">
var map; // zmienna globalna przechowująca obiekt mapy
function initMap() {
//wyszukujemy element, w którym ma być wyświetlona mapa
var domMap = document.getElementById('map');
map = new google.maps.Map(domMap, {
//ustawiamy pozycję, w której ma znajdować się środek mapy
center: {lat: -33.32, lng: 151.10},
//ustawiamy przybliżenie mapy
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
</body>
</html>
Pamiętaj, aby podmienić YOUR_API_KEY na klucz API, który możesz wygenerować logując się do console.developers.google.com.
Zanim przejdziemy dalej warto zaznaczyć, że rozwiązanie dotyczące callback-a to coś na zasadzie JSON with Padding, o którym już pisałem.
Tworzymy markery
Teraz musimy dodać do naszej mapy kilka markerów. Aby ułatwić generowanie markerów stworzymy funkcję addMarker(), która będzie przyjmować 3 parametry odpowiednio title – nazwa markera, lat – długość geograficzna oraz lng – szerokość geograficzna.
Utworzyliśmy również zmienną markers, w której będziemy przechowywać nowo utworzone markery.
var map; // zmienna globalna przechowująca obiekt mapy
var markers = []; // w tej tablicy przechowujemy markery
function addMarker(title, lat, lng) {
var marker = new google.maps.Marker({
title: title,
position: {lat: lat, lng: lng},
map: map // map to zmienna do naszej mapy
});
// przechowuje utworzone markery w naszej tablicy
markers.push(marker);
}
function initMap() {
//wyszukujemy element, w którym ma być wyświetlona mapa
var domMap = document.getElementById('map');
map = new google.maps.Map(domMap, {
//ustawiamy pozycję, w której ma znajdować się środek mapy
center: {lat: -33.32, lng: 151.10},
//ustawiamy przybliżenie mapy
zoom: 8
});
addMarker('Warszawa', 52.259, 21.020);
addMarker('Wrocław', 51.07, 17.01);
addMarker('Kraków', 50.060, 19.959);
}
Niestety nasza mapa jest ustawiona w złym miejscu i nie widzimy naszych markerów :/
Środkowanie mapy
Aby markery były widoczne musimy na podstawie ich współrzędnych wyśrodkować mapę. Z pomocą przychodzi nam wspomniany już „bounds”. Zobaczmy jak to będzie wyglądać:
var map; // zmienna globalna przechowująca obiekt mapy
var markers = []; // w tej tablicy przechowujemy markery
function addMarker(title, lat, lng) {
var marker = new google.maps.Marker({
title: title,
position: {lat: lat, lng: lng},
map: map // map to zmienna do naszej mapy
});
// przechowuje utworzone markery w naszej tablicy
markers.push(marker);
}
function initMap() {
//wyszukujemy element, w którym ma być wyświetlona mapa
var domMap = document.getElementById('map');
map = new google.maps.Map(domMap, {
//ustawiamy pozycję, w której ma znajdować się środek mapy
center: {lat: -33.32, lng: 151.10},
//ustawiamy przybliżenie mapy
zoom: 8
});
addMarker('Warszawa', 52.259, 21.020);
addMarker('Wrocław', 51.07, 17.01);
addMarker('Kraków', 50.060, 19.959);
var bounds = new google.maps.LatLngBounds(); //tworzymy nowy obiekt
for(var i=0; i<markers.length; i++) {
//dodajemy do "bounds" współrzędne każdego markera
bounds.extend(markers[i].position);
}
// wyśrodkowuje mapę na podstawie współrzędnych dodanych do bounds
map.fitBounds(bounds);
}
Dzięki tym ostatnim modyfikacjom nasza mapa jest wyśrodkowana względem pozycji naszych markerów.
Na koniec jeszcze raz całość:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Google Maps API</title>
</head>
<body>
<div id="map" style="height: 400px; width: 100%;"></div>
<script>
var map; // zmienna globalna przechowująca obiekt mapy
var markers = []; // w tej tablicy przechowujemy markery
function addMarker(title, lat, lng) {
var marker = new google.maps.Marker({
title: title,
position: {lat: lat, lng: lng},
map: map // map to zmienna do naszej mapy
});
// przechowuje utworzone markery w naszej tablicy
markers.push(marker);
}
function initMap() {
//wyszukujemy element, w którym ma być wyświetlona mapa
var domMap = document.getElementById('map');
map = new google.maps.Map(domMap, {
//ustawiamy pozycję, w której ma znajdować się środek mapy
center: {lat: -33.32, lng: 151.10},
//ustawiamy przybliżenie mapy
zoom: 8
});
addMarker('Warszawa', 52.259, 21.020);
addMarker('Wrocław', 51.07, 17.01);
addMarker('Kraków', 50.060, 19.959);
var bounds = new google.maps.LatLngBounds(); //tworzymy nowy obiekt
for(var i=0; i<markers.length; i++) {
//dodajemy do "bounds" współrzędne każdego markera
bounds.extend(markers[i].position);
}
// wyśrodkowuje mapę na podstawie współrzędnych dodanych do bounds
map.fitBounds(bounds);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
</body>
</html>