Vložení základní mapky na stránku
Ve třech jednoduchých krocích si ukážeme, jak pomocí knihovny munimap vložit základní mapku do vašich webových stránek.
Pro vložení mapy s budovami a místnostmi Masarykovy univerzity na webovou stránku je nejprve potřeba nahrát knihovnu munimap. To uděláte tak, že do hlavičky stránky (mezi značky <head> a </head>) vložíte následující kód:
<script src="//https://maps.muni.cz/munimap/latest/munimaplib.js" type="text/javascript"></script>
Na vybrané místo vaší webové stránky (mezi značky <body> a </body>) vložte značku <div> s atributem id nastaveným například na hodnotu 'map'. Na tomto místě se pak zobrazí mapa.
Id elementu, do kterého se má vykreslit mapa, můžete zvolit libovolně, stejné id ale musíte předat funkci munimap.create. Velikost mapy ovlivníte nastavením CSS stylu daného elementu (vlastnosti width a height).
<div id="map">
</div>
Mapu vytvoříte zavoláním funkce munimap.create. Parametr target je povinný, určuje id elementu, do kterého se mapa vykreslí. Na konec stránky (před uzavírací značku </body>) vložte následující kód (a případně změňte hodnotu atributu target na id elementu, do něhož chcete mapu vykreslit):
<script type="text/javascript">
munimap.create({
target: 'map'
});
</script>
Výsledek
Jestliže jste postupovali podle předchozího návodu, uvidíte na své webové stránce následující interaktivní mapu, jejíž velikost můžete ovlivnit pomocí CSS vlastností elementu, do kterého jste mapu vytvořili:
... a jak dál?
Pomocí parametrů funkce munimap.create můžete ovlivnit další nastavení mapy, jako je zvýraznění vybraných budov, volba jazyka mapy či varianta podkladové mapy. Kompletní přehled funkcí knihovny munimap a jejich parametrů (včetně vysvětlení jejich významu) naleznete v popisu rozhraní. A pro větší názornost jsme pro vás připravili jednoduché i pokročilejší příklady použití knihovny.
Stále si nejste jistí jak na to?
Následující kód jednoduché HTML stránky si můžete zkopírovat, v textovém editoru uložit do souboru s příponou .html a následně nahrát na svůj server. Dostanete tak prázdnou stránku se základní mapou. A pak si můžete sami zkoušet různá nastavení parametrů funkce munimap.create. Kompletní přehled všech parametrů a vysvětlení jejich významu naleznete v popisu rozhraní. Pro inspiraci, jak použít a nastavit jednotlivé parametry, vám mohou posloužit připravené příklady použití.
<html>
<head>
<title>Jednoduchá mapka</title>
<meta charset="UTF-8" />
<script src="//https://maps.muni.cz/munimap/latest/munimaplib.js" type="text/javascript"></script>
<style>
#map { width: 800px; height: 400px; }
</style>
</head>
<body>
<div id="map">
</div>
<script type="text/javascript">
munimap.create({
target: 'map'
});
</script>
</body>
</html>
