post_ico1

Geolokalizacja i Google Maps, cz. 5 – stylizacja mapy

Zdecydowana większość aktywnych internautów zapewne bez problemu rozpoznaje mapy od Google. Jednak, nie zawsze musi tak być :). Jako programiści możemy w znaczny sposób zmienić wygląd map. Jak to zrobić?

Przygotuj sobie na początek szkielet dokumentu, na którym będziemy pracować.

<!DOCTYPE html>
<html>
    <head>
        <style>
            html, body, #map_canvas {
                height: 100%;
                margin: 0px;
                padding: 0px;
            }
            #map-container{
                height: 100%;
            }
        </style>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&amp;libraries=places"></script>
        <script>
            /**
             *
             * @type @exp;google@pro;maps@call;Map Obiekt mapy
             */
            var map;
            ;

            /**
             * Tworzy obiekt mapy z podstawowymi ustawieniami
             * @returns void
             */
            function initialize() {
                var myLatlng = new google.maps.LatLng(52.24125614966341, 20.9619140625);
                var mapOptions = {
                    zoom: 7, disableDefaultUI: true,
                    mapTypeId: 'Styled',
                    center: myLatlng,
                    mapTypeControlOptions: {
                        mapTypeIds: ['Styled']
                    },
                };
                var styles = [
                    // tu beda style mapy
                ];
                map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
                var styledMapType = new google.maps.StyledMapType(styles, {name: 'Styled'});
                map.mapTypes.set('Styled', styledMapType);
            }

            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
    </head>
    <body>
        <div id="map-container">
            <div id="map_canvas"></div>
        </div>

    </body>
</html>

W liniach 41-42 tworzę własny styl mapy (wszystkie ustawienia będą w zmiennej styles). W linii 34 jako mapTypeIds ustawiam utworzony styl. Mając gotowy szkielet przejdźmy do sedna sprawy, a więc stwórzmy indywidualny wygląd mapy :)

Zmiana wyglądu mapy

<!DOCTYPE html>
<html>
    <head>
        <style>
            html, body, #map_canvas {
                height: 100%;
                margin: 0px;
                padding: 0px;
            }
            #map-container{
                height: 100%;
            }
        </style>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&amp;libraries=places"></script>
        <script>
            /**
             *
             * @type @exp;google@pro;maps@call;Map Obiekt mapy
             */
            var map;
            ;

            /**
             * Tworzy obiekt mapy z podstawowymi ustawieniami
             * @returns void
             */
            function initialize() {
                var myLatlng = new google.maps.LatLng(52.24125614966341, 20.9619140625);
                var mapOptions = {
                    zoom: 7, disableDefaultUI: true,
                    mapTypeId: 'Styled',
                    center: myLatlng,
                    mapTypeControlOptions: {
                        mapTypeIds: ['Styled']
                    },
                };
                var styles = [
                    // USTAWIENIA WYGLADU MAPY
                    {
                        featureType: 'water', // woda
                        elementType: 'geometry.fill', // wypelnienie
                        stylers: [
                            {color: '#1ab8ca'}, // kolor,
                            {lightness: 60} // rozjasnienie
                        ]
                    }, {
                        featureType: 'landscape.natural', // teren
                        elementType: 'all',
                        stylers: [
                            {hue: '#66FF00'}, // odcien
                            {lightness: 19} // rozjasnienie
                        ]
                    }, {
                        featureType: 'road.local', // drogi lokalne
                        elementType: 'geometry.fill', // wypelnienie
                        stylers: [
                            {color: '#a5a5a2'}, // kolor
                            {weight: 0.6} // grubosc
                        ]
                    }, {
                        featureType: 'road.arterial', // arterie
                        elementType: 'geometry.fill', // wypelnienie
                        stylers: [
                            {color: '#7a7a7a'}, // kolor
                            {weight: 1.0} // grubosc
                        ]
                    }, {
                        featureType: 'road.highway', // autostrada
                        elementType: 'geometry.fill', // wypelnienie
                        stylers: [
                            {color: '#32322b'}, // kolor
                            {weight: 1.4} // grubosc
                        ]
                    }
                ];
                map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
                var styledMapType = new google.maps.StyledMapType(styles, {name: 'Styled'});
                map.mapTypes.set('Styled', styledMapType);
            }

            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
    </head>
    <body>
        <div id="map-container">
            <div id="map_canvas"></div>
        </div>

    </body>
</html>

Wygląd mapy zmienia się podając odpowiednie parametry w zmiennej styles. W powyższym kodzie zmieniłem wygląd wody, terenu oraz róznych typów dróg. Oczywiście nie jest to pełna lista możliwości. Więcej informacji znajdziesz w dokumentacji. Ponadto Google udostępnia kreator, gdzie za pomocą wygodnego interfejsu można stworzyć własny styl mapy.

A tak wygląda mapa po mojej metamorfozie…

styl-mapy

Co sądzisz o wpisie?
BeżnadziejnySłabyŚredniDobryBardzo dobry (Brak ocen, bądź pierwszy!)
Loading...