Blog Google mapa do responzívneho dizajnu

Google mapa do responzívneho dizajnu

Stále sa stretávam s požiadavkou, vedel by si mi povedať ako spravím Google mapu do responzívneho dizajnu webstránky? Riešenie sa dá nájsť jednoduchým použitím Googla. Avšak ľudia sú leniví, tak tu je návod, krok za krokom, ako na to.

Použiť môžeme buď iFrame alebo JavaScript. Dnes v dobe HTML5, by som sa rád iFrame-u rád zbavil úplne. Každopádne spomeniem oba návody.

  1. Získanie API Kľúča
  2. JavaScript Mapa (odporúčam)
  3. Iframe Mapa (neodporúčam)
  4. Výsledok
  5. Získanie GPS údajov do mapy

1.      Získanie API Kľúča

Používať budeme Google Maps Javascript API v3. Treba si v prvom rade vytvoriť API Kľúč, ktorým sa do API autorizujeme.

Najprv prejdeme do vývojárskej konzoly Googlu (predpokladám, že Google účet už má každý). Adresa: https://console.developers.google.com/

Klikneme na Create project.

Otvorí sa nám Pop-Up do ktorého si nastavíme meno projektu. Meno je čisto na vašom uvážení. Ja som použil SimpleProject.

ID Produktu sa nastavuje automaticky. V prípade, že sa vám nepáči, môžete si ho refreshnúť.

Projekt vytvoríte kliknutím na Create.

Po spustení vytvárania sa vám v pravom dolnom rohu otvorí pop-up so stavom vytvárania projektu.

Potom vás presmeruje na nástenku projektu. Tam nás zaujíma položka Boost your app with Google API.

Klikneme na Enable API.

Presmeruje nás to na stránku, kde máme možnosť zapínať a vypínať jednotlivé služby Google API.

V zapnutých službách nemáme Google Maps Javascript API v3, tak si ho vyhľadáme a klikneme na tlačidlo OFF.

Ak všetko prebehlo v poriadku, tak nám v povolených službách pribudne Google Maps JavaScript API v3.

Týmto sme zariadili to, že nám API Kľúč dokáže spolupracovať s mapami. Lenže nemáme ten kľúč. Takže prejdeme v ľavom menu na Credentials.

Z možností, ktoré nám vyskočia vyberieme Public API access a klikneme na Create new Key.

9

Vyskočí nám Pop-up okno, v ktorom vyberieme typ kľúča. Momentálne potrebujeme kľúč, ktorý dovolí pristupovať k API z prehliadača. Takže vyberieme Browser Key.

10

Ďalej nás Google žiada, aby sme nastavili zdroje, z ktorých pôjdu dopyty na API. To znamená naša doména.

Tu môžeme nastaviť aj viac domén vrátane sub-domén a uri.

  • Ak viem, že mapa bude len na stránke nasadomena.sk/kontakt, tak nastavím do textového poľa: nasadomena.sk/kontakt
  • Ak chceme zobrazovať mapu na všetkých stránkach nášho webu, napríklad vo footeri, napíšeme do textového poľa: nasadomena.sk/*
  • Ak chceme povoliť prístup do tohto API do viacerých sub-domén, tak nastavíme do textového poľa: *.nasadomena.sk
  • Ak chceme pristupovať kompletne z celej domény, aj zo sub-domén a so všetkými URI našej domény, tak nastavíme: *.nasadomena.sk/*

Kľudne môžeme pridať aj viac domén, ale pozor, traffic je obmedzený na 1 000 000 dopytov za deň. Každú doménu dávame do nového riadku.

Keď máme všetko, tak ako chceme, klikneme na Create.

Ak všetko prebehne správne, zobrazí sa nám tabuľka s API kľúčom, dátumom vytvorenia, osobou, ktorá kľúč vytvorila, a s názvom domény, pre ktorú je určený.

Teraz môžeme pristúpiť k implementácii máp do nášho webu.

2.      JavaScript Mapa

Najprv vložíme tento kód do HTML medzi <head></head> čiže do hlavičky dokumentu.

13

Tento kód nám načíta JS API. Za  „key=“ vložíme kľúč, ktorý sme si vygenerovali v konzole.

Stále pracujeme v hlavičke dokumentu, kde vložíme za tento skript, ďalší skript, ktorý už nám inicializuje mapu.

  <script type="text/javascript">
  function initialize() {   // funkcia inicializacie
      var mapOptions = {    // nastavenia mapy
          zoom: 15,      // zoom - kolko sa ma priblizit na dany bod
          center: new google.maps.LatLng(49.192196,18.733228), //vycentrovat mapu na túto pozíciu
          mapTypeId: google.maps.MapTypeId.ROADMAP //typ mapy
       };
   
       var map = new google.maps.Map(document.getElementById(\'location-canvas\'),
                     mapOptions);      //načítanie mapy do elementu s divom "location-canvas"
   
      var marker = new google.maps.Marker({      // nastavenie značkovača
          map: map,   // má sa pridať na mapu, ktorú sme vytvorili vyššie
          draggable: false,  //nemá sa s ním dať hýbať
          position: new google.maps.LatLng(49.192196,18.733228) //pozícia bude tam, kde sme to vycentrovali
      });
  }
   
  google.maps.event.addDomListener(window, \'resize\', initialize); //ak sa okono zmenší alebo zväčší prispôsobí sa mu mapa
  google.maps.event.addDomListener(window, \'load\', initialize) //pri načítaní okna sa nastaví mapa podľa veľkosti okna.
</script>

Keď toto všetko máme, tak už len stačí niekam do tela stránky, medzi <body> a </body> vložiť nasledovný div.

14

Hotovo. Google mapa do responzívneho dizajnu 16

3.      Iframe Mapa

Iframe mapu si vieme jednoducho postaviť cez online builder. Na stránke: https://developers.google.com/maps/documentation/embed/start.

Zadáme adresu, tak ako na obrázku, a klikneme na tlačidlo Looks Good.

Ďalej od nás systém vyžiada API kľúč, ktorý sme si vygenerovali. Tak ho zadáme a klikneme na Done.

Získame kód, ktorý vyzerá takto:

Avšak po vložení do stránky, kód nebude responzívny. To docielime tým, že iframe obalíme do divu.

<div class="google-maps">
  <iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?      q=Dlh%C3%A1%20923%2C%20%C5%BDilina%2C%20Slovakia&key=AIzaSyAHgkrOjhj83rbgpDsm9ajXrjOHqZgUzi4"></iframe>
</div>

Ďalej do CSS vložíme nasledovné definície.

<style>
    .google-maps {
        position: relative;
        padding-bottom: 75%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
</style>

A máme hotovo. Google mapa do responzívneho dizajnu 20

4.      Výsledok

Desktop:

Mobil:

5.      Získanie GPS údajov do mapy

GPS údaje do mapy získame priamo v mapách a to nasledovne:

V mapách dáte vyhľadať adresu. Kliknete pravým tlačidlom na bod, ktorý vám označilo, a kliknete na možnosť Čo je tu?

V ľavom hornom rohu sa vám zobrazia súradnice.

Pripomienky do komentárov. Díky. Google mapa do responzívneho dizajnu 20


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 React Developer

Chceš pracovať na dlhodobom, technologicky inovatívnom projekte a mať za to dobre zaplatené? Pre spoločnosť, ktorá používa matematické metódy...

Senior Frontend Developer

Množstvo práce sa zvýšilo, ale plat nie? Pre mladú slovenskú online firmu, ktorá má reálnu ambíciu, aby jej hlavný...

Medior Backend Developer

Chceš sa podieľať na rozvoji digitálnych služieb určených pre zdravotníctvo? Poď robiť veci, ktoré dávajú zmysel! Pátrame po Medior...

Medior/Senior FullStack Developer

Chceš pracovať na dlhodobom, technologicky inovatívnom projekte a mať za to dobre zaplatené? Pre spoločnosť, ktorá používa matematické metódy...

Active Directory Admin

Páčil by sa ti projekt v Prahe so skvelým finančným ratom? Pre globálnu technologickú a obchodnú spoločnosť hľadáme Active...

Engineering Expert Public Cloud Network Engineering

Homeoffice, dobrá odmena a projekt, ktorý sa Ti bude páčiť? Pre globálnu technologickú a obchodnú spoločnosť hľadáme Engineering Expert...

DevOps Enginner / Online Bezpečnosť

Pre IT spoločnosť, ktorá sa venuje online bezpečnosti hľadáme do tímu DevOps Medior Engineer. Spoločnosť má 20-členný tím s...

GIRL ́S DAY 2020: Už po siedmy raz môžu stredoškoláčky nahliadnuť do IT firiem po celom Slovensku.

Občianske združenie Aj Ty v IT už siedmy rok prepája IT firmy a organizácie so stredoškoláčkami po...

DIGITALEUROPE: Na digitalizáciu pôjde z plánu obnovy až pätina prostriedkov. Ako zareaguje Slovensko?

Výzva v podobe zníženej globálnej konkurencieschopnosti, ako aj kríza spojená s pandémiou postavili Európu...

OpenSlava 2020 tentokrát online!

OpenSlava 2020 je 8. ročník úspešnej konferencie pre IT komunitu na Slovensku...

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