Blog „Inteligentné“ prekrytie Google mapy

„Inteligentné“ prekrytie Google mapy

responzivny_dizajnPrednedávnom som písal blog ako na responzívnu mapu do dizajnu vašej webstránky. Snáď sa vám páčilo a dnes vám ukážem jeden malý „hack“ ako spraviť „inteligentné“ prekrytie tejto Google mapy.

Prečo by som to robil?

Určite poznáte ten pocit, že scroll-ujete po stránke a prídete k mape, a tam aj skončíte, pretože vám mapa začne scroll-ovať. O to horšie je to na mobiloch.

V prípade, že už parameter scrollwheel, draggable atď… nestačia, pretože napríklad chcete, aby sa na tej mapke dalo scrollovať a hýbať, avšak nie od začiatku, ale až po nejakej akcii užívateľa, tak viete spraviť jeden malý milý fix.

Logika

Po kliknutí chcem aby som mohol v mape scrollovať, hýbať sa, avšak keď opustím myšou priestor mapy, chcem aby som opäť mohol bez problémov scrollovať, bez toho, aby ma zasekla mapa.

Realizácia

Zostáva nám teda popísať si ako tento skvelý „hack“ aplikujeme.

Takže tu máme HTML

<!-- Zaciatok alebo nejaky wrapper pre mapu, nemusi to byt section -->
<section id="google-map">

<!-- Do tohto divu si naloadujeme mapu navod najdete v predchadzajucom blogu, link pod clankom -->
  <div id='location-canvas' style='width:100%;height:300px;'>
  </div>

<!-- A toto je nas MAGIC DIV -->
  <div class="over-map">
  </div>

<!-- Koniec sekcie s mapou -->
</section>

Do CSS pridáme

#google-map {
  position: relative;
}
.over-map { position: absolute; width: 100%; height: 100%; background-color: transparent; top: 10px; right: 10px; z-index: 99; }

A nakoniec si pridáme takúto malú srandičku do JavaScriptu:

 $(document).ready(function(){
        initialize();

    // vytvoríme si objekt nášho magického divu
    var magicDiv = $('.over-map');
    
    // vytvorime si objekt mapy
    var magicMap =  $('#location-canvas');
   
    /* nabindujeme si klik, tj... ak klikneme na tento magicky 
       div ktory prekryje mapu, tak sa skryje  */
    magicDiv.click(function(){
      $(this).hide();
    });

    /* nabindujeme si odchod mysky z mapy, tj... ak mys opusti mapu 
       , div ktory prekryje mapu sa znova zobrazi  */
    magicMap.mouseout(function(){
       magicDiv.show();
    });
        
    /* Fix pre dotykové obrazovky */      
    magicMap.bind('touchend', function(){
      $('.over-map').show();
    })
    
});

(potrebujeme samozrejme jQuery, vieme to spraviť aj bez jQuery, keby niekto chcel, nech napíše do komentára, doplníme. Teraz sa mi nechce).

A hotovo. „Inteligentné“ prekrytie Google mapy 2

Ešte video, ako to celé funguje, prípadne si skúste na http://www.detroit.sk

A ešte JSFiddle ukážka.


Dobrý článok? Chceš dostávať ďalšie?

Už viac ako 6 200 ITečkárov dostáva správy e-mailom. Nemusíš sa báť, nie každé ráno. Len občasne.



Súhlasím so spracovaním mojich osobných údajov. ( Viac informácií. )

Tvoj email neposkytneme 3tím stranám. Posielame naňho len informácie z robime.it. Kedykoľvek sa môžeš odhlásiť.

Ľuboš Beran
Ľuboš Beranhttp://www.detroit.sk
Venujem sa vývoju prevažne webových aplikácii založených na open-source riešeniach (Node.JS, PHP...), no vo voľnom čase ma baví najmä bezpečnosť a riešenie CME (crack me) hlavolamov a problematiky okolo IoT.

IT Analytik/čka

IT Analytik/čka | Bankovníctvo | TPP | Bratislava Pracuj pre NAJ zamestnávateľa v oblasti bankovníctva na mobilnej aplikácií s množstvom...

Frontend/ React Developer

Pracuj podľa vlastných pravidiel, slobodne a kreatívne. Pre Frontend Developera máme 12+ mesačný projekt pre prepravnú spoločnosť. Práca je na...

Backend / .Net, C# Developer

Pracuj podľa vlastných pravidiel, slobodne a kreatívne. Pre Backend Developera máme 12+ mesačný projekt pre prepravnú spoločnosť. Práca je na...

C/C++ Developer

Chce to niečo výnimočné? Zmeň prostredie a získaj nadšenie z práce! Spoločnosť, ktorá vyvíja hardvérové čipy hľadá C/C++ Developera. Zakladateľ...

Data Scientist / REMOTE

Pre mladý startup vyvíjajúci softvér, ktorý prispieva hráčom k lepšiemu zážitku z hrania, hľadáme Data Scientist. Založili ho dvaja...

IT Aplikačný Architekt

Chceš stabilné zamestnanie, vychutnávať si skvelý kolektív a mať priestor na realizáciu svojich riešení? Pre spoločnosť pôsobiacu v energetike...

Front End Developer

Pracuj na svetovom SW produkte, ktorý je používaný miliónmi používateľov! Firma rýchlo rastie a vyvíja nové features. Poznáme ich prostredie...

Máte vo firemných stretnutiach chaos? Česká firma našla riešenie, teraz s aplikáciou dobývajú svet

Vyvíjajú ju v Českej republike, pracujú na nej aj hendikepovaní kolegovia a používajú ju firmy v rôznych krajinách sveta....

Ondrej Kubovič – Digitálna bezpečnosť a riziká na internete

Tentokrát sme sa porozprávali s Ondrejom Kubovičom, špecialistom v spoločnosti ESET na populárnu tému digitálnej bezpečnosti. Ondrej nám uviedol...

Slovenskí tvorcovia hier dosiahli v roku 2020 rekordný obrat 72 miliónov EUR, zamestnávali 870 ľudí

Slovenský herný priemysel nezastavila ani pandémia, v roku 2020 opäť výrazne rástol. Podľa štatistík Slovak Game Developers Association prekonal...

Čítaj ďalej:

Dobrý článok? Chceš dostávať ďalšie?

Už viac ako 6 200 ITečkárov dostáva správy e-mailom. Nemusíš sa báť, nie každé ráno. Len občasne.

Súhlasím so spracovaním mojich osobných údajov. ( Viac informácií. )

Tvoj email neposkytneme 3tím stranám. Posielame naňho len informácie z robime.it. Kedykoľvek sa môžeš odhlásiť.