Možnost zobrazit mapu (konkrétně Google maps) na vlastních stránkách je určitě užitečná funkce a je to poměrně jednoduché. Pojďme, ale hlouběji a podívejme se na další funkce, které poskytuje bez omezení Google maps. Přináším Vám seriál, ve kterém si ukážeme jak pracovat s Google maps api V3. Na konci toho návodu, pak budeme mít funkční plánovač trasy. Nejdůležitější však je, že se seznámíme s důležitými funkcemi a knihovnami Google maps.
V3 verze Google Maps API je tady sice již déle než dva roky, přesto určitě neuškodí si připomenou co vše nám přinesla navíc oproti starší verzi:
- zcela nová architektura MVC
- nepotřebujete API klíč
- podpora mobilních zařízení iPhone, iPad, Android = rychlé zobrazování
- nové vrstvy Traffic Layer a Bicycle Layer
- nadmořská výška
- Street View
- KML/GeoRSS
- Integrace s Google Earth a Adsense
- více knihoven
- výborná dokumentace
Vlastní plánovač trasy s Google maps
Využitím některých funkcí a knihoven z Google maps api v3, si postavíme jednoduchý plánovač trasy. Zadáme dva body, vykreslíme nejrychlejší možnou trasu, spočítáme celkovou vzdálenost a přibližný čas, který budem potřebovat k překonání této trasy. Takže jdeme na to.
Příprava stránky pro práci s Google maps
Nejdříve je nutné do stránky vložit odkaz na knihovnu Google maps. V editoru si otevřete stránku, na kterou chcete vložit mapu. Do hlavičky přidáme link na knihovnu, tedy do bloku
<head></head>
Přidáme i knihovnu jQuery, kterou později také použijeme:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
Na konci odkazu vidíte parametr sensor nastavený na false. Znamená to, že není použiváno žádné zařízení GPS pro zjištění aktuální polohy.
Nyní si připravíme formulář pro zadání počátečního a koncového místa naší trasy a přídáme kontejner pro zobrazení mapy:
<table> <tr> <td><label>Z místa: </label><input id="address1" type="text" /></td> <td><label>Do místa: </label><input id="address2" type="text" /></td> <td><input type="button" id="send" value="odeslat" /></td> </tr> </table>
<div id="map" style="width: 500px; height: 400px;"></div>
Zobrazujeme Google map
Stránku máme připravnou, je čas na vykreslení naší mapy. Nastavíme si zakladní parametry mapy, vytvoříme objekt mapy a zobrazíme v připraveném bloku:
$(document).ready(function() {
var myOptions = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(49.8, 15.5)
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
});
Perfektní funguje, pro dnešek máme hotovo. Příště zprovozníme formulář a začneme přidávat funkce plánovače trasy, vykreslíme nekratší trasu z počáteční adresy do adresy koncové. Funkční demo dnešního dílu google maps - plánovač trasy a zdrojový kód si můžete stáhnout.
