Naučte se pracovat s Google Maps API zábavnou formou

V listopadu 2015 jsem v rámci většího systému napsal jednoduchý PHP skript, který s pomocí Google Maps API určuje nejkratší vzdálenost mezi dvěma městy v kilometrech.

Tento údaj pak používá společně s informací o cenách pohonných hmot a průměrné spotřebě k výpočtu celkových nákladů na palivo pro danou cestu.

O pár dní později přišel nápad využít Google Maps API k tvorbě zábavné naučné hry nejen pro řidiče, ve které je cílem co nejlépe odhadnout vzdálenost mezi dvěma ze seznamu náhodně vybranými městy.

Webová tipovací hra využívající Google Maps API

Na klíčových částech kódu této hry, kterou jsem ve volném čase vytvořil, vám dnes ukážu, jak Google Maps API funguje a jak s ním pracovat.

První krok – získat API Key

Pro práci s Google Maps API je nezbytné nejprve zaregistrovat projekt a získat od Googlu autentizační klíč API Key. Získání klíče není nijak zpoplatněno a nejedná se ani o nic složitého.

Předpokladem je vlastnit Google účet. Pokud účet u společnosti Google nemáte, založte si ho nyní.

Jste-li přihlášení ke svému Google účtu, ve dokumentaci pro vývojáře k Maps Embed API naleznete vpravo nahoře možnost získat klíč API.

Získat API Key

Po kliknutí na tlačítko GET a KEY vyberte z nabídce rozbalovacího seznamu, který se objeví, položku (+Create a new project), zadejte libovolný název projektu a potvrďte (CREATE AND ENABLE API).

Vzápětí vám Google vygeneruje unikátní klíč, uložte si jej a nikomu ho neukazujte ;). Bude vypadat zhruba takto:

AIzaSyArmpY8nyAjpG83Z0Hj8m01LJCnFy-enzc

A hurá na kód!

Celá hra sestává ze dvou souborů index.phpresult.php. Na první stránce,  tedy na indexu, získáme dvě ze seznamu náhodně vybraná města a nastavíme formulář, do kterého hráč zadá svůj tip na vzdálenost mezi nimi.

index.php

<?php   
//vytvoříme pole $town obsahující několik českých měst, kolik a jaká si sem napíšete je jen na vás
$town = Array("Brno","Praha","Cheb","Aš","Olomouc", "Pardubice","Mariánské Lázně", "Karlovy Vary", "České Budějovice","Ústí nad Labem","Ostrava","Hradec Králové","Klatovy", "Plzeň");
      
$origin = "";
$destination  = "";
      
//dokud se budou hodnoty proměnných $origin a $destination shodovat, bude probíhat jejich výběr z pole $town, tím zajistíme, že hra nevybere shodná města
while ($origin == $destination) {
 $origin = $town[rand(0, count($town) - 1)];
 $destination = $town[rand(0, count($town) - 1)];
}
      
//Google Maps API potřebuje víceslovné názvů měst spojit znakem +, mezeru nahradíme za + funkcí str_replace
$origin = str_replace(' ', '+', $origin);
$destination = str_replace(' ', '+', $destination);

//sestavíme si URL pro curl, s jehož pomocí získáme pole $arr informací ohledně trasy mezi $origin a $destination
$url = "http://maps.googleapis.com/maps/api/directions/json?origin=$origin&destination=$destination&sensor=false";

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$output = curl_exec($ch);
curl_close($ch);
$arr = json_decode($output, TRUE);
    
//znaky + u víceslovných názvů opět nahradíme mezerami
$origin = str_replace('+', ' ', $origin);
$destination = str_replace('+', ' ', $destination);

//vypíšeme hráči města u kterým má tipovat nejkratší vzdálenost
echo $origin;
echo $destination;
      
//nejkratší vzdálenost si vytáhneme z pole $arr
$distance = $arr['routes'][0]['legs'][0]['distance']['text'];
//upravíme, zaokrouhlíme na celé číslo a uložíme do proměnné $distance_usable
$distance_usable = round(preg_replace("/[^0-9,.]/", "", $distance));
  
?>  
  
<!-- $origin, $destination a $distance_usable uložíme do skrytých polí formuláře, hráč přidá svůj tip a vše předáme metodou post skriptu result.php -->
<form action="result.php" method="post">
<input id="input_tip" autocomplete="off" type="text" name="tip" size="30" value="">
<input type="hidden" name="distance_usable" value="<?php echo $distance_usable;?>">
<input type="hidden" name="origin" value="<?php echo $origin;?>">
<input type="hidden" name="destination" value="<?php echo $destination;?>">
<button type="submit" style="background:none;border:0;"><img src="gfx/arrow_right.png"></button>
</form>

Skript result.php přijme data z index.php metodou POST a vše vyhodnotí, k tomu s pomocí rámce zobrazí Google mapu s vyznačenou trasou mezi městy, viz následující PHP kód.

result.php

//pomocí formuláře z index.php hráč odeslal metodou post svůj tip, ale také ze skrytých polí skutečnou vzdálenost a názvy obou měst
$tip = $_POST['tip'];
$distance_usable = $_POST['distance_usable'];
$origin = $_POST['origin'];
$destination = $_POST['destination'];
      
//výsledkem je rozdíl mezi hráčovým tipem a skutečnou vzdáleností
$result = $distance_usable - $tip;
//resp. jeho absolutní hodnota :)
$result = abs($result); 
    
//zde přichází na řadu API key, který jsme získali úplně na začátku, v tomto rámci se zobrazí Google Mapa s vyznačenou trasou mezi městy jejichž názvy máme uloženy v proměnných $origin a $destination  
echo "<iframe width=\"100%\" height=\"55%\" frameborder=\"0\" scrolling=\"no\" marginheight=\"0\" marginwidth=\"0\" src=\"https://www.google.com/maps/embed/v1/directions?key=[GOOGLE API KEY]&origin=$origin&destination=$destination&language=cs\"></iframe>";  
                 
//připomeneme hráči jeho tip a sdělíme mu skutečnou vzdálenost
echo "<p>Tvůj tip je <strong>$tip Km</strong><p>"; 
echo "<p>Skutečná vzdálenost činí <strong>$distance_usable Km</strong></p>";
       
//podle toho jak moc se hráčův tip liší od skutečné vzdálenosti se zobrazí jedna ze šesti hlášek
echo "<p>"; 
if ($result == 0) { 
echo "No teda! Na kilometr přesně. Tady se někdo vyzná ;)"; 
} elseif ($result > 0 && $result < 10) { 
echo "Dobře! Seknul/a jsi se jen o $result Km."; 
} elseif ($result > 9 && $result < 25) { 
echo "To by šlo... seknul/a jsi se jen o $result Km.";
} elseif ($result > 24 && $result < 50) { 
echo "No... dejme tomu. Seknul/a jsi se o $result Km.";
} elseif ($result > 49 && $result < 100) {
echo "To už jsi trošku někde jinde... seknul/a jsi se o $result Km.";
} elseif ($result > 99 && $result < 500) { 
echo "Tak to už jsi úplně někde jinde... seknul/a jsi se o $result Km."; 
} else { 
echo "Děláš si srandu? Seknul/a jsi se o $result Km.";
} 
echo "</p>";

//Dáme hráči možnost tipovat znovu, jednoduše jej odkážeme zpět na index.php a celý proces se opakuje
echo "<p><a href=\"index.php\"><img src=\"gfx/arrow_result.png\" alt=\"Tipovat znovu\"></a></p>";

Věřím, že už teď vás napadá, kde všude by šlo možností, které Google Maps API přináší, skvěle využít.

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

+ 22 = 23