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&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&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…
