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>

 

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

*

*

19 + 8 =