Jednoduchý web nad Google Maps API v3
Takže co budeme budovat? Celý web bude jedna velká mapa, nad kterou se bude "vznášet" obsah včetně navigačních prvků. V plánu je celý seriál, proto se finální verze může čas od času měnit. Důležitější je ale živá ukázka tohoto článku.
Tak, jdeme na to!
První věc je samotná stránka, do které mapu načteme. Použijeme už nové HTML5 elementy, ať tvoříme pro budoucnost, ne pro minulost.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Skvělý web s Google Maps</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="/css/bb_css.css" />
<script type="text/javascript" src="/js/bb_js.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=SEM_ZKOPÍROVAT_API_KLÍČ&sensor=true"></script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
<header>
<nav class="mainMenu">
<a href="#"><h1>Google Maps web</h1></a>
<a href="#">Domů</a>
<a href="#">Druhý odkaz</a>
<a href="#">Další</a>
<a href="#">A ještě něco</a>
</nav>
</header>
<footer>
</footer>
</body>
</html>Taky budou potřeba nějaké styly, které uložíme do souboru css/bb_css.css. (Proč to bb_? Protože mám více projektů v jednom adresáři, toto je jediná podivnost, slibuju!)
html{
height: 100%;
}
body{
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas{
height: 100%;
width: 100%;
}CSS nám roztáhne html element na celou stránku, stejně jako body. Zároveň zrušíme jakékoliv okraje, které prohlížeče přidávají a nakonec roztáhneme #map_canvas, do kterého budeme načítat mapové podklady, přes celou stránku.
Zbývá trocha javascriptu, který vložíme do souboru js/bb_js.js.
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(49.195102, 16.608528),
zoom: 15,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.querySelector("#map_canvas"), mapOptions);
}Vytvoříme si funkci initialize(), kterou zavoláme po načtení stránky. V ní definujeme objekt mapOptions, který nese nastavení pro mapu jako je výchozí poloha (center), výchozí přiblížení (zoom) a typ mapy, v tomto případě hybridní. Nakonec už jen vytvoříme novou instanci objektu google.maps.Map a předáme mu kam se má načíst (do map_canvasu) a s jakým nastavením.
Tak! To bychom měli. Jediný problém je, že to nefunguje... Je totiž potřeba si nechat vygenerovat API klíč od Googlu, aby nás neignoroval a začal posílat mapové podklady.
Google Maps API key
Přihlásíme se se svým Google účtem na stránku Google APIs a asi ještě nemáme žádný projekt, tak si hned první vytvoříme tlačítkem Create project.... Poté si najdeme vedle popisku Google Maps API v3 (asi třicáté shora) přepínač OFF a klikneme na něj. Pročteme :) a odsouhlasíme licenci a znovu si najdeme odkaz Google Maps API v3, vedle kterého je už na přepínači ON. Tento odkaz nás zavede na přehled využití našich map. Tam se toho moc nedočteme, mnohem zajímavější je v levém menu položka API Access. Na této stránce se nachází vytoužený čtyřicetimístný API key, který je denně omezený na "pouhých" 25 000 požadavků. :)
Nyní už jen stačí klíč zkopírovat do naší stránky, konkrétně do adresy v tagu script, ve kterém se dožadujeme Google map.
...
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=SEM_ZKOPÍROVAT_API_KLÍČ&sensor=true"></script>
...Hle, Brno!
Ještě si můžeme pohrát s parametry v našem souboru bb_js.js, změnit výchozí souřadnice, počáteční zoom, nebo typ mapy. Tyto typy jsou HYBRID, SATELLITE, ROADMAP a TERRAIN. A protože se nám nelíbí ovládání od Googlu a všichni máme myš s kolečkem, tak ho skryjeme přidáním disableDefaultUI: true do mapOptions.
Cílem článku však není jen mít neovladatenou mapu. Chceme i nějaké menu. Zkopírujeme si tedy následující styly do bb_css.css, ať máme mapu o něco veselejší. Důležité je nastavení position a z-indexů u jednotlivých prvků.
html{
height: 100%;
}
body{
font-family: sans-serif;
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas{
height: 100%;
position: absolute;
width: 100%;
}
.mainMenu{
margin: 0 auto;
padding-top: 1em;
position: relative;
width: 60%;
z-index: 100;
}
.mainMenu h1{
display: inline;
font-size: 100%;
font-weight: normal;
padding: 0;
margin: 0;
}
.mainMenu a{
background: #fff;
border-right: 1px solid #eee;
color: #333;
display: block;
float: left;
padding: 0.7em 0;
text-decoration: none;
text-align: center;
text-shadow: 1px 1px 1px #d7d7d7;
width: 19%;
}
.mainMenu a:first-child{
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.mainMenu a:last-child{
border-right: none;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.mainMenu a:hover{
background: #333;
border-color: #999;
color: #fff;
}Nyní by měl výsledek vypadat stejně jako moje pokusná Google mapa. Pokud ne, tak napište do komentářů pod článkem, co se nepovedlo. Spolu to pak dáme dohromady!
Myslím, že jsme už něco vytvořili a můžeme být na to málo hrdí. Příště se budeme věnovat hlavně mapě a umisťování jednotlivých bodů na různé souřadnice.