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

NetSuite Consultant / Hamburg / Munich /

Basic informationPosition: Junior/Medior NetSuite Consultant Contract Type: Internal Employee Location: Hamburg or Munich /Home office possible/ Language: fluent German and EnglishGermany company which...

.NET Developer

Pozícia: .NET  Developer Typ Zmluvy: TPP Lokalita: Bratislava Plat:  od 1500 - 2500 EUR/BruttoMedzinárodná softvérová spoločnosť hľadá .NET Developera.Náplňou práce bude budovanie...

Angular Developer – REMOTE

Pre nášho partnera hľadáme ITčkára na pozíciu Angular Developer. Spoločnosť sa venuje vývoju platformy pre firmy na znižovanie nákladov...

REMOTE Android Developer

Pozícia: Android Developer Typ Zmluvy: Kontrakt Lokalita: REMOTE Plat:  od 3600 - 4000 EUR/mesačneIde o vývoj aplikácie pre platobné terminály. Očakávame aspoň...

Java Develooper

Medzinárodná IT spoločnosť, ktorá vyvíja softvér pre banky a poisťovne v západnej Európe hľadá človeka na pozíciu JAVA DEVELOPER.Práca...

Frontend Developer

Medzinárodná IT spoločnosť, ktorá vyvíja softvér pre banky a poisťovne v západnej Európe hľadá človeka na pozíciu Frontend Developer.Práca...

IT Test Manager

Medzinárodná spoločnosť, ktorá vyvíja softvér pre banky a poisťovne v západnej Európe hľadá človeka na pozíciu IT Test Manager.Práca...

Slovensko.Digital: Otvorený list o situácii na FIIT STU

Vážený pán Minister školstva, vedy, výskumu a športu SR, Rektor Slovenskej technickej...

Daniel Husar: Najpodstatnejšie sú soft skills a ľudská povaha

Daniel Husar je full-stack engineer, aktuálne pracuje v spoločnosti Intercom v San Francisco v Kalifornii. Má rad...

Aj ty v IT nominované na cenu UNESCO v oblasti vzdelávania dievčat a žien

Prize for Girls’ and Women’s Education je medzinárodné ocenenie udeľované od roku 2016 Organizáciou Spojených národov pre...

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