pátek 2. května 2008

Google Maps API II

Úvodem
V tomto článku si ukážeme některé další možnosti, které Google Maps API nabízí.
V tomto článku se již nebudeme zabývat základy API, ale rovnou se vrhneme na pokročilejší vlastnosti. Pokud s Google Maps API začínáte nebo narazíte na něco nejasného, doporučujeme náš předchozí článek Google Maps API.
Nezapomeňte: Pro používání Google Maps API je potřeba API klíč!


Změna současných prvků na mapě
V následujícím příkladě rozšíříme nabídku map o hybridní mapu, která rozšiřuje
satelitní mapu:

Klasická mapa s možností přepínaní typu

Satelitní mapa



Přepnutí na hybridní mapu, které se tváří jako rozšíření satelitní mapy

Rozeberme si kód:
Načtení API:
<script type="text/javascript" src="http://www.google.com/jsapi?key=API_KLIC"></script>
<script type="text/javascript">
google.load("maps", "2");

function GoogleMAPA() {
Vytvoříme a inicializujeme mapu:
var mapa = new google.maps.Map2(document.getElementById("mapa"),
{ size: new google.maps.Size(400,400) } );
mapa.addMapType(G_PHYSICAL_MAP);
mapa.setCenter(new google.maps.LatLng(50.086033,14.424405), 7);
Vytvoříme nový ovládací prvek „ovladac“:
var ovladac = new google.maps.HierarchicalMapTypeControl();
Před jeho nastavením podle našich představ jej musíme „vyčistit“:
ovladac.clearRelationships();
Přidáme hybridní mapu do „podmenu“ k satelitní mapě:
ovladac.addRelationship(G_SATELLITE_MAP, G_HYBRID_MAP, "Labels", false);
A přídáme na mapu:
mapa.addControl(ovladac);
}
</script>

Celý kód pak vypadá takto:
<html>
<head>
<title>Google Maps API - ukázka</title>
<script type="text/javascript" src="http://www.google.com/jsapi?key=API_KLIC"></script>
<script type="text/javascript">
google.load("maps", "2");
function GoogleMAPA() {
var mapa = new google.maps.Map2(document.getElementById("mapa"),
{ size: new google.maps.Size(400,400) } );
mapa.addMapType(G_PHYSICAL_MAP);
mapa.setCenter(new google.maps.LatLng(50.086033,14.424405), 7);
var ovladac = new google.maps.HierarchicalMapTypeControl();
ovladac.clearRelationships();
ovladac.addRelationship(G_SATELLITE_MAP, G_HYBRID_MAP, "Labels", false);
mapa.addControl(ovladac);
}
</script>
</head>

<body onload="GoogleMAPA()" onunload="google.maps.Unload()">
<div id="mapa" style="width: 400; height: 400px"></div>
</body>
</html>

Funkci GoogleMAPA() zavoláme hned po vykreslení stránky prohlížečem. Metoda
google.maps.Unload(), volaná při ukončení stránky, se postará o správné
„ukončení“ mapy (uvolnění paměti apod.).
Ukázka, jak to funguje.

Vlastní ovládací prvky na mapě
Možná Vás napadlo, že pokud můžete měnit již existující ovládací prvky, mohli
byste vytvářet i vlastní. Ano, jde to. Podívejme se, jak na to.
V následujícím příkladu zobrazíme mapou a vlastní tlačítka pro přepínaní typu
mapy.
Pozn.: V následujícím kódu budeme používat starší API s metodami pojmenovanými
Gjmeno.

Otevřeme script:
<script type="text/javascript">
Vytvříme funkci:
function Ovladac() {
}
Vytvoříme prototyp, který říká, že budeme vytvářet nový ovládací prvek:
Ovladac.prototype = new GControl();
Funkce initialize ovládacího prvku říká, co se stane při vložení prvku na mapu:
Ovladac.prototype.initialize = function(mapa) {
Vytvoříme nový „kontejner“ – místo na mapě pro ovládací prvek – pomocí značky „div“:
var kontejner = document.createElement("div");
Nyní přídáme jednotlivá „tlačítka“,
vytvoříme prostor pro tlačítko po jehož stisknutí se zobrazí klasická mapa:
var DivKlasickaMapa = document.createElement("div");
Nastavíme jak bude vypadat – definice je níže:
this.setButtonStyle_(DivKlasickaMapa);
Přidáme tlačítko ho do celkového místa pro námi vytvářený ovládací prvek:
kontejner.appendChild(DivKlasickaMapa);
Vytvoříme popisek pro tlačítko:
DivKlasickaMapa.appendChild(document.createTextNode("Klasicka mapa"));
Vytvoříme sledovač událostí, který bude sledovat, zda došlo ke klinutí na
tlačítko:
GEvent.addDomListener(DivKlasickaMapa, "click", function() {
A pokud ano, tak změní typ mapy na požadovaný:
mapa.setMapType(G_NORMAL_MAP);
});

To stejné uděláme i pro ostatní typy map, které chceme dát uživateli na výběr:
var DivSatelitniMapa = document.createElement("div");
this.setButtonStyle_(DivSatelitniMapa);
kontejner.appendChild(DivSatelitniMapa);
DivSatelitniMapa.appendChild(document.createTextNode("Satelitni mapa"));
GEvent.addDomListener(DivSatelitniMapa, "click", function() {
mapa.setMapType(G_SATELLITE_MAP);
});

var DivHybridniMapa = document.createElement("div");
this.setButtonStyle_(DivHybridniMapa);
kontejner.appendChild(DivHybridniMapa);
DivHybridniMapa.appendChild(document.createTextNode("Hybridni mapa"));
GEvent.addDomListener(DivHybridniMapa, "click", function() {
mapa.setMapType(G_HYBRID_MAP );
});

Nakonec kompletní ovládací prvek předáme mapě:
mapa.getContainer().appendChild(kontejner);
return kontejner;
}

V této funkci říkáme, kam se má ovládací prvek vložit – bude to vlevo nahoru 10
pixelů od rohu mapy:
Ovladac.prototype.getDefaultPosition = function() {
return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(10, 10));
}

Nakonec určíme vzhled tlačítek: barvu, pozadí, font, atd.:
Ovladac.prototype.setButtonStyle_ = function(tlacitko) {
tlacitko.style.color = "red";
tlacitko.style.backgroundColor = "white";
tlacitko.style.font = "small Arial";
tlacitko.style.border = "1px solid black";
tlacitko.style.marginBottom = "3px";
tlacitko.style.textAlign = "center";
tlacitko.style.width = "7em";
tlacitko.style.cursor = "pointer";
}

Vše bude řídit funkce, kterou spustíme po načtení stránky:
function spust() {
Vytvoříme mapu:
var mapa = new GMap2(document.getElementById("pmapa"));
Inicializujeme ji:
mapa.setCenter(new GLatLng(50.086033,14.424405), 7);
A přidáme námi vytvořený ovládací prvek:
mapa.addControl(new Ovladac());
}
</script>

Celý kód pak vypadá takto:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps API - Ukazka</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=API_KLIC"
type="text/javascript"></script>
<script type="text/javascript">

function Ovladac() {
}
Ovladac.prototype = new GControl();

Ovladac.prototype.initialize = function(mapa) {
var kontejner = document.createElement("div");
var DivKlasickaMapa = document.createElement("div");
this.setButtonStyle_(DivKlasickaMapa);
kontejner.appendChild(DivKlasickaMapa);
DivKlasickaMapa.appendChild(document.createTextNode("Klasicka mapa"));
GEvent.addDomListener(DivKlasickaMapa, "click", function() {
mapa.setMapType(G_NORMAL_MAP);
});

var DivSatelitniMapa = document.createElement("div");
this.setButtonStyle_(DivSatelitniMapa);
kontejner.appendChild(DivSatelitniMapa);
DivSatelitniMapa.appendChild(document.createTextNode("Satelitni mapa"));
GEvent.addDomListener(DivSatelitniMapa, "click", function() {
mapa.setMapType(G_SATELLITE_MAP);
});

var DivHybridniMapa = document.createElement("div");
this.setButtonStyle_(DivHybridniMapa);
kontejner.appendChild(DivHybridniMapa);
DivHybridniMapa.appendChild(document.createTextNode("Hybridni mapa"));
GEvent.addDomListener(DivHybridniMapa, "click", function() {
mapa.setMapType(G_HYBRID_MAP );
});

mapa.getContainer().appendChild(kontejner);
return kontejner;
}

Ovladac.prototype.getDefaultPosition = function() {
return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(10, 10));
}

Ovladac.prototype.setButtonStyle_ = function(tlacitko) {
tlacitko.style.color = "red";
tlacitko.style.backgroundColor = "white";
tlacitko.style.font = "small Arial";
tlacitko.style.border = "1px solid black";
tlacitko.style.marginBottom = "3px";
tlacitko.style.textAlign = "center";
tlacitko.style.width = "7em";
tlacitko.style.cursor = "pointer";
}

function spust() {
var mapa = new GMap2(document.getElementById("pmapa"));
mapa.setCenter(new GLatLng(50.086033,14.424405), 7);
mapa.addControl(new Ovladac());
}

</script>
</head>

<body onload="spust()" onunload="GUnload()">
<div id="pmapa" style="width: 500px; height: 500px"></div>
</body>

</html>

Výsledek by měl vypadat takto:

Klasická mapa s vlastním ovládáním typu mapy

Po přepnutí na satelitní mapu:


A vzhled po přepnutí na hybridní mapu:

Funkčnost můžete ověřit v živé ukázce.

Geocoding
Geocoding je služba, která umožňuje z adresy získat koordináty. Na základě
těchto koordinátů pak lze snadno Google mapu nastavit, aby toto místo zobrazila,
případně na něj umístila značku.

<script type="text/javascript"
src="http://www.google.com/jsapi?key=API_KLIC"></script>
<script type="text/javascript">
google.load("maps", "2");

Tentokrát budeme mapu používat ve více funkcích, globální proměnné se nevyhneme:
var mapa = null;
Geocoder je instance třídy google.maps.ClientGeocoder() -, což je přesně to, co
převádí adresy na koordináty
var geocoder = null;
Funkce, která se spustí při načtení stránky:
function spust() {
Vytvoření mapy, její inicializace a vytvoření geocoderu:
mapa = new google.maps.Map2(document.getElementById("pmapa"));
mapa.setCenter(new google.maps.LatLng(49.79545,15.732422),7);
geocoder = new google.maps.ClientGeocoder();
}

Druhá funkce nastaví mapu na zadanou adresu:
function ukaz(adresa) {
Kontrola, že byla zadána nějaká adresa:
if (adresa != ""){
Kontrola, že geocoder byl vytvořen:
if (geocoder) {
Geocoderu se pošle adresa a následně se spustí funkce:
geocoder.getLatLng(adresa, function(misto) {
Pokud nebyla adresa nalezena, zobrazí se chybová hláška:
if (!misto) {
alert(adresa + " nenalezena!");
}
Jinak se mapa nastaví na pozici podle adresy:
else {
mapa.setCenter(misto, 13);
A na přesné místo se umístí značka a zobraí se okno s adresou tohoto místa:
var znacka = new google.maps.Marker(misto);
mapa.addOverlay(znacka);
znacka.openInfoWindowHtml(adresa);
}
}
);
}
}

Ošetření stavu, kdy uživatel nezadal adresu:
else {alert("Zadejte hledanou adresu!");}
}
</script>

Tělo html potom vypadá takto:
Po načtení stránky se spustí funkce spust() pro inicializaci
<body onload="spust()" onunload="google.maps.Unload()">
Pokud dojde k zadání obsahu pole a kliknutí na tlačítko, spustí se funkce
ukaz():
<form action="#" onsubmit="ukaz(this.adresa.value); return false">
<p>
<input type="text" size="60" name="adresa" value="" />
<input type="submit" value="Ukaz!" />
</p>
<div id="pmapa" style="width: 500px; height: 500px"></div>
</form>
</body>

Celý kód vypadá takto:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps API Example: Simple Geocoding</title>
<script type="text/javascript" src="http://www.google.com/jsapi?key=API_KLIC"></script>
<script type="text/javascript">
google.load("maps", "2");

var mapa = null;
var geocoder = null;

function spust() {
mapa = new google.maps.Map2(document.getElementById("pmapa"));
mapa.setCenter(new google.maps.LatLng(49.79545,15.732422),7);
geocoder = new google.maps.ClientGeocoder();
}

function ukaz(adresa) {
if (adresa != ""){
if (geocoder) {
geocoder.getLatLng(adresa, function(misto) {
if (!misto) {
alert(adresa + " nenalezena!");
}
else {
mapa.setCenter(misto, 13);
var znacka = new google.maps.Marker(misto);
mapa.addOverlay(znacka);
znacka.openInfoWindowHtml(adresa);
}
}
);
}
}
else {alert("Zadejte hledanou adresu!");}
}
</script>
</head>

<body onload="spust()" onunload="google.maps.Unload()">
<form action="#" onsubmit="ukaz(this.adresa.value); return false">
<p>
<input type="text" size="60" name="adresa" value="" />
<input type="submit" value="Ukaz!" />
</p>
<div id="pmapa" style="width: 500px; height: 500px"></div>
</form>
</body>
</html>

Výsledek vypadá takto:

Mapa čekající na zadání adresy


Po zadání adresy se mapa automaticky přemístí na toto místo a zobrazí tam značku
a informaci:

Vyzkoušet možnosti Geocodingu můžete v ukázce kódu výše.

Pokud jste se dočetli až sem, měli byste mít dostatečné znalosti pro používání
Google Maps na svých stránkách. Pokud Vás Google Maps oslovili, další informace
můžete najít na domovský stránkách Google Maps API (odkazy jsou níže).

Stejně tak můžete navštívit diskuzní skupinu okolo gug.cz nebo gug.cz skupinu se zaměřením na programování

Užitečné odkazy
Domovská stránka Google Maps: maps.google.com
Domovská stránka Google Maps API: code.google.com/apis/maps
Dokumentace Google Maps API: code.google.com/apis/maps/documentation
Reference: code.google.com/apis/maps/documentation/reference.html
Komunita vývojářů kolem Google Maps API: groups.google.com/group/Google-Maps-API

Zdroj podkladů k článku: code.google.com

Žádné komentáře: