Google mapa do responzívneho dizajnu

2
135

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.

Google Developer Console

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.

Google Developers Console - Project

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

Google Developers Console - vytvorit projekt

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.

Google Developers Console - Enable API

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

5

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.

6

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

7

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.

8

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

12

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. 

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.

18

Ď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:

19

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. 

4.      Výsledok

Desktop:

15

Mobil:

16

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.

17

Pripomienky do komentárov. Díky. 

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

Už viac ako 4 200 z vás dostáva správy e-mailom. Nemusíš sa báť, nie každé ráno. Len občasne.

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

  • V prípade, že robíme mapu cez Iframe, tak logicky musíme v console povoliť: Google Maps Embed API namiesto Google Maps JavaScript API, prípadne povoliť oboje.
    (Keby to niekomu nedošlo…)

  • Ľubo

    Ďakujem za skvelý tip. Práve som potreboval vložiť mapu na jeden web vo WordPresse a minimálne CSSko pre responzívny dizajn mi ušetrilo veľa času. Ale ešte som trošku musel pošachovať z WordPressom, lebo ten sa snažil byť veľmi múdry. 🙂

    http://blog.hostname.sk/2015/01/30/google-mapa-a-trampoty-s-wordpressom/

    P.S.: jeden malý fix do CSS je potrebný: .google-maps { clear: both; }