Zaznacz stronę

Google Maps API daje nam niemal nieograniczone możliwości związane ze stylizacją map. Począwszy od prostych zmian, które pozwolą nam dostosować wygląd mapy do stylistyki strony WWW, poprzez zastosowanie specjalistycznych wyglądów w zaawansowanych systemach webowych.
W celu wystylizowania naszej mapy  należy zbudować tablicę funkcji, zawierającą jej elementy wraz z opisanym stylem (drogi, zbiorniki wodne, parki, opisy etc.). Poniżej prezentuję składnie takiej tablicy:

var featureOpts = [
{
featureType: ”,
elementType: ”,
stylers: [
{hue: ”},
{saturation: ”},
{lightness: ”},
// etc…
]
},
{
featureType: ”,
// etc…
}
]

Jak już wcześniej pisałem mapa składa się z zestawu funkcji, określonych za pomocą MapTypeStyleFeatureType. Dokładny opis wszystkich funkcji znajdziemy pod adresem internetowym:

https://developers.google.com/maps/documentation/javascript/reference#MapTypeStyleFeatureType

Przykładowe zastosowanie funkcji:

{
featureType: „road”
}

Niektóre funkcje mapy zawierają obiekty podrzędne, deklarowane w notacji road.local. W wypadku stylizacji funkcji road, obiekt road.local dziedziczy styl. Niektóre funkcje na mapie składają się z dodatkowych elementów. Na przykład  road (drogi) to nie tylko linia graficzna (geometry) , ale również etykiety (labels). Obsługiwane są następujące typy elementów:

  • all – wszystkie elementy
  • geometry – wybiera wszystkie elementy geometryczne funkcji.
    • geometry.fill – wypeĹ‚nione elementy funkcji.
    • geometry.stroke – obrys
  • labels – etykiety tekstowe
    • labels.text – tylko tekst
    • labels.text.fill – tylko wypeĹ‚nienie
    • labels.text.stroke tylko obrys

Przykład zastosowania:

{
featureType: „road.local”,
elementType: „labels”
}

Do stylizacji używane są  opcje typu MapTypeStyler, stosowane do mapowania funkcji formatowania. Obsługiwane są następujące właściwości MapTypeStyler:

  • hue – (an RGB hex string) – podstawowy kolor, dziedziczÄ…ce elementy sÄ… w odcieniach tej barwy.
  • lightness – Jasność obiektu wyraĹĽona liczbÄ… z zakresu -100 (czarny) do 100 (biaĹ‚y)
  • saturation – Nasycenie koloru wyraĹĽone wartoĹ›ciÄ… z zakresu od -100 do 100
  • gamma – wartość z zakresu od 0.01 do 10.0 zwykle wykorzystywana do poprawy kontrastu.
  • invert_lightness – jeĹĽeli ustawiona na true, tworzy negatyw
  • visibility – (on, off, simplified) od tej wĹ‚aĹ›ciwoĹ›ci zaleĹĽy czy element pojawi siÄ™ na mapie.
  • color – (RGB hex string) ustawia kolor funkcji mapy.
  • weight – grubość obiektĂłw/obrysĂłw.

Kolor funkcji może być jedynie podstawowym kolorem lub połączeniem koloru, nasycenia czy jasności.
Przykład zastosowania to:

stylers: [
{ hue: „#00d4ff” },
{ saturation: 60 },
{ lightness: -20 },
{ gamma: 1.51 }
]

stylers: [
{ color: „#99FF33” }
]

Przykładowe wykorzystanie  Google Maps API, wykorzystujące stylizację map. Należy pamiętać aby w zmienić API_KEY, na własny klucz.

<script src=”https://maps.googleapis.com/maps/api/js?key=API_KEY„></script>

Kod strony WWW:

mapa

<!DOCTYPE html>
<html>
<head>
<title>Przykładowa mapa Google Maps API</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src=”https://maps.googleapis.com/maps/api/js?key=API_KEY”></script>
<script>
var map;
var cdest = new google.maps.LatLng( 50.0295067, 18.7024044);

var MY_MAPTYPE_ID = ‚custom_style’;

function initialize() {

var featureOpts = [
{
stylers: [
{ hue: ‚#919191’ },
{ visibility: ‚simplified’ },
{ weight: 0.4 },
{invert_lightness :true},
{saturation:-100}
]
},
{
elementType: ‚labels’,
stylers: [
{ visibility: ‚off’ }
]
},
{
featureType: „road”,
elementType: „geometry.fill”,
stylers: [
{ color: ‚#ffd55d’},
{ visibility: ‚on’        },
{weight:1.5}
]
},
{
featureType: „road.local”,
elementType: „geometry.fill”,
stylers: [
{ color: ‚#9a7302’},
{ visibility: ‚on’        }
]
}
];

var mapOptions = {
zoom: 12,
center: cdest,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
},
mapTypeId: MY_MAPTYPE_ID
};

map = new google.maps.Map(document.getElementById(‚map-canvas’),
mapOptions);

var styledMapOptions = {
name: ‚Custom Style’
};

var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);

map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
}

google.maps.event.addDomListener(window, ‚load’, initialize);

</script>
</head>
<body>
<div id=”map-canvas”></div>
</body>
</html>