Společně prozkoumáme celý proces implementace map na html stránku. Od základního zobrazení po stylování, interaktivitu i řešení problémů. Zjistíte, že vložení živé mapy není nic složitého a dokáže zužitkovat potenciál webu na maximum.
Jak snadno přidat mapu na svoje webové stránky za 5 minut
Vložení mapy do vašeho webu nemusí být nic složitého. Dnes vám představím rychlý 5minutový návod, jak přidat základní mapu Google Maps na vaše stránky za pomocí jejich jednoduchého API.
Zaprvé se zaregistrujte na developers.google.com/maps a vytvořte si zdarma klíč API. Ten budete potřebovat pro načítání map z jejich serverů.
Nyní se podívejte do hlavičky svých stránek a přidejte následující řádek před závěrečný tag:
htmlCopy
<script async defer src="https://maps.googleapis.com/maps/api/js?key=VAŠ_KLÍČ&callback=initMap"></script>
Nahraďte VAŠ_KLÍČ za svůj skutečný klíč získaný při registraci. Tím jsme načetli potřebné skripty pro mapy.
Teď se podívejme do těla stránky: Vložte následující řádky kódu před </body>:
htmlCopy
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 50.0755, lng: 14.4378},
zoom: 8
});
}
</script>
To je vše! Pokud teď obnovíte stránku, měla by se v div s id „map“ načíst základní mapa střední Evropy. Díky jednoduchému API Googlu tak máte za 5 minut mapu na svém webu.
Alternativní způsoby vložení mapy do html stránky
Google Maps jsou skvělé na začátek, ale existuje ještě mnoho dalších zajímavých mapových alternativ. Jednou z nich je otevřená knihovna Leaflet, která umožní ještě větší flexibilitu a přizpůsobení.
Leaflet se jednoduše přidá do stránky podobně jako Google API. Stačí přidat do <head> toto:
htmlCopy
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
A poté vložit prvek pro mapu:
htmlCopy
<div id="mapid"></div>
Nyní vytvoříme mapu pomocí několika řádků JavaScriptu:
jsCopy
var map = L.map('mapid').setView([50.0755, 14.4378], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
Hned můžeme začít upravovat vzhled, přidávat body zájmu a provádět další funkce! Leaflet je tak skvělá alternativa k ovládání map přímo na webu.
Nebuďte závislí na internetu, použijte statické mapy
Nemusíte mít neustále připojení k internetu, abyste mohli uživatelům zobrazit mapy. Vyrobte si raději statické mapy, které lze dobře optimalizovat pro rychlé načtení.
Postup je následující:
Nejprve si stáhněte požadovanou oblast z OpenStreetMap ve formátu PNG či SVG. SVG mají výhodu ve skalovatelnosti.
Uložte obrázek mapy na server a importujte do stránky pomocí <img> značky:
htmlCopy
<img
src="mapa.png"
alt="Statická mapa Prahy">
Pro co nejlepší výsledky:
- Stlačte velikost obrázku pomocí nástrojů jako TinyPNG
- Použijte formát PNG pro nižší velikost při zachování kvality
- Vložte
<img>co nejblíže začátku HTML
Statické mapy tak ušetří data i čas na načtení. Použijte je v případech, kdy dynamika není nutná – např. na úvodní stránce.
Pro větší interakci pak můžete dynamické mapy kombinovat – třeba pro zobrazení zvětšené oblasti.
Dejte své mapě osobnost aktivními body zájmu
Doposud jsme se věnovali pouze základnímu zobrazení map. Nyní je čas dodat jim život pomocí interaktivních prvků, které zvýší angažovanost uživatelů.
Jedním z takových prvků jsou body zájmu označované jako marker. Google Maps i Leaflet je umožňují jednoduše přidávat:
jsCopy
// S Google Maps
var praha = {lat: 50.0878, lng: 14.4205};
var marker = new google.maps.Marker({
position: praha,
map: map,
title: "Praha"
});
// S Leafletem
var marker = L.marker([50.0878, 14.4205]).addTo(map);
marker.bindPopup("Praha").openPopup();
Můžete tak označit název města, budovu či jinou polohu. Důležité je udělat marker interaktivní – přidat popisky, odkazy či akce při kliknutí.
Dále využijte polygony pro vyznačení oblastí, linie pro trasy. Animujte prvky např. pro „live“ pohyb vozu.
S takto oživenou mapou si uživatel mapu nejen prohlédne, ale i pro-žije a zapamatuje si více informací.
Nepodceňujte styly, dejte své mapě jedinečný vzhled
Dosud jsme řešili funkční stránku map, ale stejně důležitý je i jejich vzhled. Ten ovlivní dojem uživatele a zapamatování klíčových informací.
Jak na vlastní styly u map? Především je třeba zvážit:
- Barvy pozadí, popředí a prvků na mape
- Velikost a styl písma titulků
- Vzhled tlačítek a ovládacích prvků
- Řazení a formát informací v popisech
U API jako Google Maps či Leaflet lze tvarovat vzhled pomocí vlastních CSS tříd a selektorů.
Například stylováním třídy markerů:
cssCopy
.marker {
background: green;
border-radius: 50%;
width: 20px;
text-align: center;
}
Pro větší flexibilitu použijte např. stylovací knihovnu Mapbox GL, která umožní plně si přizpůsobit každý detail mapy.
Dbejte také na responzivitu – úpravu stylů pro mobil. Styly dodají mapě jedinečný charakter a zvýší její percepční hodnotu.
Stylováním mapy zaujmete uživatele a získáte jejich důvěru k ostatním informacím na webu.
Závěr
Nezáleží na tom, zda jste začátečník nebo pokročilý uživatel, výběr mezi Google Maps, OpenStreetMap nebo Bing Maps vám umožní přizpůsobit mapy podle vašich potřeb.
S pomocí HTML a vhodného mapového API, jako je Google Maps JavaScript API, můžete snadno integrovat interaktivní mapy na svůj web. Změna velikosti, přidání markerů, responzivita pro různá zařízení a další funkce jsou nyní dostupné pro vytvoření skvělého uživatelského zážitku.
Pro ty, kteří hledají alternativy, jsou zde také knihovny jako Leaflet, které poskytují jednoduchou alternativu k Google Maps, a Mapbox, který umožňuje vytvářet vlastní mapové podklady a styly.
