Blog „Inteligentné“ prekrytie Google mapy

„Inteligentné“ prekrytie Google mapy

„Inteligentné“ prekrytie Google mapy Prednedá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

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ť.

Junior / Senior Java Backend Software Engineer

JOB Position: Java Backend Software Engineer Contract type: TPP, Contract Location: Bratislava Salary Junior: 1500 EUR/Brutto Salary Senior: 2200 EUR/Brutto Rate: 3000 -4000 EUR/monthlyPrimary Job...

Senior Sieťový Špecialista

PRÁCA Pozícia: Sieťový špecialista Pracovný pomer:  TPP Miesto práce: Bratislava, on-site Plat: od 1700+ EUR/Brutto/mesačneHlavné zodpovednosti:Navrhuje architektúru, štruktúru a IP adresácie multiplatformových LAN/MAN/WAN sietí ...

Data Mining Expert

PRÁCA Pozícia: Data Mining Expert Pracovný pomer:  TPP Miesto práce: Bratislava, on-site Plat: od 2000+ EUR/Brutto/mesačneAké výzvy ťa čakajú?Vynikajúca pracovná príležitosť pre nadšenca práca...

Artificial Intelligence Consultant

JOB Position: Artificial Intelligence Consultant Contract type: Full-Time Location: Bratislava Salary: 2000 EUR/Brutto/monthsResponsibilities:conceptual processing and development of the new solutions in the area e.g....

Artificial Intelligence Expert

JOB Position: Artificial Intelligence Expert Contract type: Full-Time Location: Bratislava Salary: 2000 EUR/Brutto/monthsSuccessful adaptation of technologies like machine learning, deep learning, artificial inteligence will determine companies...

Senior Front-end / Angular Developer / Tvorba serverovej a aplikačnej logiky

PRÁCA Pozícia: FE/ Angular developer Pracovný pomer:  TPP, živnosť Miesto práce: Bratislava, Prievidza, Žilina Plat: od 1700+ EUR/Brutto/mesačneNáplň práce:Spolupráca na vývoji SW...

Senior .NET/Angular developer

PRÁCA Pozícia: .NET/Angular developer Pracovný pomer:  TPP Miesto práce: Bratislava, on-site Plat: od 1700+ EUR/Brutto/mesačneČo bude Vašou náplňou práce:spolupodieľanie sa na vývoji SW riešenia...

Nexteria – IT Club

Prednášky, diskusie, workshopy priamo od expertov z praxe.    Prepájame študentov a ľudí, ktorí...

Campus cowork

Campus cowork je medzinárodný coworking v Bratislave s dvoma lokáciami. Campus MLYNY...

Čo sme stihli v roku 2019

Každý rok je niečím špeciálny a rok 2019 nie je výnimkou. V...

Čí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ť.