Google Maps - plánovač trasy

publikováno 20.11.2011 16:00
Google Maps - plánovač trasy

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:&nbsp;</label><input id="address1" type="text" /></td>
   <td><label>Do místa:&nbsp;</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.