Google maps – ve vlastním kabátě

Už se vám stalo, že jste na nějakém webu narazili na Google mapu (dále jen Gmapa), která nevypadala úplně jako Gmapa a nebo jste ani nepoznali, že by se jednalo o Gmapu? A říkali jste si jak to sakra udělali, že vypadá úplně jinak? V tomto článku si povíme jak na to a možná vás překvapí, že to není žádná věda...

Map stylers

Gmapy mají jednu skvělou vlastnost a to jsou takzvané „stylers". O co jde? Zjednodušeně řečeno, pomocí stylers můžete upravit barevnost jednotlivých elementů na mapě jako jsou cesty, zastavěné plochy, vodní plochy, body zájmu a tak dále. A nejenom to, jde také úplně vypnout jejich zobrazení. Gmapa jen s vodními plochami nebo cestami? No problem :)

Jak na to

Jednoduchý příklad - dejme tomu, že klient má nějaký designový web laděný do černobíla a nelíbí se mu, že mapa na stránce s kontaky je barevná a chtěl by ji černobílou. Takže mu buď řekneme, že se zbláznil a že to nejde a nebo použijeme stylers.

Teď je čas na trochu toho javascriptu. Předpokládám, že máme načtené Google Maps API a v HTML nějaký kontejner pro mapu např. div#gmap.

// inicializace mapy
var mapOptions = {
  zoom: 13,
  center: new google.maps.LatLng(49.169766,16.628874)
};
var map = new google.maps.Map(document.getElementById('gmap'), mapOptions);

Mapu bychom měli a teď na to hodit ještě nějaký ten styl. A protože kluci z Google nelenili a udělali pro nás obyčejné smrtelníky toto supr udělátko, můžem se do toho hned pustit. Aby byla mapa černobílá, stačí nastavit všem elementům saturaci na -100. Jediné co je potřeba udělat, je to že necháme všechno nastavení tak jak je a přetáhneme posuvník u saturace úplně doleva.

A to je celé, docela easy co? Mě se ješte nelíbí, že je teď mapa málo kontrastní, tak si nastavím gammu na 0,5. Výsledek můžete vidět okamžitě na mapě na pozadí. Styly máme nastavené, tak teď už jenom zbývá dostat je do naší mapy. Vpravo je okno Map Style a v něm úplně vlevo dole je nenápadné ale o to důležitější tlačítko „Show JSON".

Po kliknutí na něj se objeví popup okno. V něm je kus kódu (JSON pole s vlastnostmi, které jsme si nastavili), který si zkopírujeme a použijeme v našem javascriptu následovně:

// map styles
var mapStyles = [ { "stylers": [ { "saturation": -100 }, { "gamma": 0.5 } ] } ];
// prirazeni stylu do mapy
map.setOptions({styles: mapStyles});

A to je vše přátelé. Viz. mapa níže. Violà

 

 

Vytvoření StyledMapType

Budeme pokračovat v našem příkladu a řekněme, že náš klient jak už to u většiny klientů bývá, je sice spokojený, ale něco ho ještě napadlo. Chtěl by, aby se dalo přepínat mezi černobílou mapou a původní Gmapou. Tohle je už malinko složitější, ale taky nic co by se nedalo zvládnout.

Nejdřív musíme trochu upravit vlastnosti mapy, které jsme si definovali na začátku článku:

var mapOptions = {
  zoom: 13,
  center: new google.maps.LatLng(49.169766,16.628874),
  mapTypeControlOptions: {
    mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_bw']
  }
};

Přidali jsme vlastnost mapTypeControlOptions (nastavení pro přepínač typu mapy) a v ní nadefinovali idčka typů map, které chceme používat. První je výchozí googlovská „roadmap" a druhá je naše černobílá mapa. Teď jen musíme vytvořit nový StyledMapType vycházející z našich stylů a přiřadit jej k idčku „map_bw".

// prirazeni stylu do noveho StyledMapType
var styledMap = new google.maps.StyledMapType(mapStyles, {name: "Černobílá mapa"});
 
// sparovani styledMap s id 'map_bw'
map.mapTypes.set('map_bw', styledMap);
 
// nastaveni typu mapy, ktery bude aktivni
map.setMapTypeId('map_bw');

A tady je výsledek

 

 

Zajímá vás téma Google map více? Napište nám, co by vás zajímalo. Co třeba problematika clusterů? (Pokud nevíte, co to je, podívejte se na tuto mapu.)

Těšíme se na vaše komentáře.

Sdílet článek:

Petr Grochál Autor: Petr Grochál
petr.grochal@superkoderi.cz

Komentáře

  • Avatar

    1. Martin Držka 13. 01. 2014 v 11:37

    Ahoj, zajímalo by me jakým způsobem nejcasteji resite mapy (klasickou jednoduchou mapu s markerem) pro „mobilní“ breakpointy. Plno requestů a pouze responzí (asi to nejhorší), nebo detekcí a potom a) bez mapy úplně, b) odkazem na mapu (nebo nativní aplikaci) nebo c) pouze statickým (Google static map api ) obrázkem? A jak se to v pripade statického obrázku (Google static api) kombinuje s highres rozlisenim. Mají nějaký parametr pro vrácení @x2 obrázku? Nebo je potreba delat detekci u klienta. Celkove mi přijde KONCEPČNĚ nejlepší tohle řešení od Brada Frosta, http://codepen.io/…t/full/tLxAs ale statický obrázky vrací v jedné velikosti (na nadstandarten vetsich zarizenich jsou to pekny mazanice). Díky

  • Avatar

    2. Michal Matuška - SuperKodér | 13. 01. 2014 v 11:54

    Ahoj Martine,
    zrovna teď se tím zabývám na jednom projektu. Rozhodl jsem se pro lazyload po zobrazení mapy ve viewportu. Tzn. všechny requesty (včetně api) probíhají až když jsou opravdu potřeba. Mám tam textový preloader „načítám mapu“. Ještě je důležité myslet na aktivaci/deaktivaci mapy na touch zařízení aby se uživatel nedostal do touch pasti. Toto řeším tlačítkem.

    Druhá varianta je to co popisuješ ty. Bohužel parametr pro x2 obrázky zatím dle hledání není.
    Snad odpověd pomohla.

  • Avatar

    3. Martin Držka 13. 01. 2014 v 12:17

    Chápu to tedy asi správně, že pro „desktop“ verzi používáte lazyload pro rychlejší načtení plnohodnotné mapy a pro „mobilní“ zařízení bud odkaz nebo statickou mapu dle prípadu uzití? Nakonec to bude asi stejna tak, že univerzální řešení není a lišší se dle případu :) Díky a těším se na další články.






Využijte formátování Texy!

SuperKodéři se mění na SUPERKODERS. Už jsme spustili prozatímní jednoduchou stránku, která vám nové Superkodéry představí.

Přejít na nový web Zůstat na současném webu