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>

Print Friendly, PDF & Email