Google Maps: dvě drobnosti

... Petr Blahoš, 12. 6. 2020 JavaScript

Při práci s Google Maps a značkama (Marker) jsem došel k závěru, že na barevné mapě jsou značky špatně vidět. Tak jsem se rozhodl mapu přebarvit do odstínů šedi. Při té příležitosti jsem zjistil, že na mapách se dá změnit styl snad všeho.

Odstíny šedi i barev

Saturation +50 Saturation -50 Hue +30 Hue -30 Lightness +30 Lightness -30

Nastavení stylu uděláme tak, že do mapOptions přidáme styles. Za běhu se dá styl změnit voláním map.setOptions. Kostra našeho kódu bude pořád stejná, budeme měnit jen hodnotu proměnné mapStyle.

<div id="map" class="map"></div>
<script>
function initMap1() {
  var mapStyle = [{
            stylers: [{
                saturation: -100
            }]
        }];
  var center = {lat: 50.0851039, lng: 14.4085619};
  var map = new google.maps.Map(document.getElementById('map1'), {
    zoom: 14, center: center, 
    styles: mapStyle
  });
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

Pole mapStyle může obsahovat několik objektů, každý v podstatě stejný. Nejjednodušší forma je pouze nastavení stylers pro všechno. Trošku složitější je pak toto:

{
  "featureType": "road",
  "elementType": "geometry",
  "stylers": [
    { "visibility": "off" }
  ]
}

Každý takový objekt může říkat k jaké vlastnosti (featureType) se tento styler vztahuje, a jaký typ elementu (elementType) v rámci vlastnosti styler upravuje. Když některý z nich vynecháme, vztahuje se na všechno. Tak například tohle schová všechno, kromě cest a vodních ploch:

var mapStyle = [
    {
      featureType: "poi",
      stylers: [ { visibility: "off" } ]
    },
    {
      featureType: "landscape",
      stylers: [ { visibility: "off" } ]
    },
    {
      featureType: "administrative",
      stylers: [ { visibility: "off" } ]
    },
    {
      featureType: "transit",
      stylers: [ { visibility: "off" } ]
    },
];

Mohli bychom to rozebírat celé hodiny. Já přidám už jen jednu trochu divočejší ukázku. Popis jednotlivých stylerů najdete v dokumentaci. Existuje dokonce webový nástroj, ve kterém si můžete svůj styl naklikat.

Co když se mapa nenahraje

Existuje globální funkce gm_authFailure, která se zavolá v případě, že problému s autorizací. To se může stát, když dojde kvóta, nebo se někdo pokusí použít API KEY z nepovolené domény. Příklad:

function gm_authFailure() {
  var els = document.getElementsByClassName("map");
  for (var i = 0; i < els.length; i++) {
    els[i].innerHTML = "Google Maps API není k dispozici.";
  }
}

I o tomhle je zmínka v dokumentaci.

Google Maps: dvě drobnosti

Odstíny šedi i barev

Co když se mapa nenahraje

Odkazy