Juraj: Vytvorená stránka „{{Navigacne menu - webovske technologie}} Google Maps obsahuje viacero rozhraní API, ktoré vám umožnia vložiť funkčnosť Google máp do vlastnej aplikácie. V súča…“

2011-05-18T10:40:49Z

Vytvorená stránka „{{Navigacne menu - webovske technologie}} Google Maps obsahuje viacero rozhraní API, ktoré vám umožnia vložiť funkčnosť Google máp do vlastnej aplikácie. V súča…“

Nová stránka

{{Navigacne menu - webovske technologie}}
Google Maps obsahuje viacero rozhraní API, ktoré vám umožnia vložiť funkčnosť Google máp do vlastnej aplikácie. V súčasnosti (r. 2011) poskytuje Google nasledujúce mapové API:
*Maps JavaScript API – umožňuje vložiť mapu na web stránku pomocou Javascriptu
*Maps API for Flash – pre vkladanie máp používa ActionScript. Mapy vkladá ako flashové animácie.
*Google Earth API – na web stránku vkladá 3D model zeme.
*Static Maps API – mapu vloží ako statický obrázok. Nie je potrebné použiť Javascript.
*Web Services – pre zadávanie zemepistných súradníc používa URL požiadavky. Odpoveď zo servera je vo formáte XML alebo JSON.
==Google Maps JavaScript API V3==
Základným prvkom pri každom použití aplikácie Mapy Google V3 API je "mapa". Mapa je definovaná ako objekt google.maps.Map.
V nasledujúcom príklade bude najjednoduchší prípad zobrazenia mapy:

<source lang="html4strict">
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(49.04349434439 , 17.46688842773);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}

</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
</source>

Výsledok prechádzajúceho kódu:

[[Súbor:jednoducha mapa.png|center|400px]]

Vysvetlenie:

'''Definícia typu aplikácie'''

HTML aplikácia je definovaná ako HTML5 (<nowiki><!DOCTYPE html></nowiki>). HTML5 je odporúčaný pre tento typ maps API. Mapa bude zobrazená cez celú plochu web browsera (pozri CSS definíciu štýlov)

'''Nahranie Google Maps API'''

Adresa http://maps.google.com/maps/api/js smeruje na miesto, odkiaľ sa nahráva javascriptové funkcie zabezpečujúce funkcionalitu Google Maps API vo verzii 3. Nahranie tohto skriptu je povinné:

<source lang="javascript">
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false">
</script>
</source>

Pri načítaní maps API je potrebné uviesť parameter sensor, ktorý hovorí o tom, či aplikácia automaticky zisťuje polohu na mape. V príklade je uvedená hodnota false.

Tag <nowiki><meta></nowiki> umiestnený v hlavičke hovorí, že mapa by mala byť zobrazená na plnej obrazovke a nemalo byť možné meniť je veľkosť (platí pre mobilné zariadenia)

'''HTML element pre zobrazenie mapy'''

Pre zobrazenie mapy slúži HTML element div, ktorý má rozmery ako je samotné okno web browsera:

<source lang="html4strict">
<div id="map_canvas" style="width:100%; height:100%"></div>
</source>
Emement div má nastavený atribút id na hdonotu „map_canvas“. Toto ID slúži pre manipuláciu obsahu elementu pomocou DOM.

'''Nastavenie mapy'''

Pre samotným vytvorením objektu Maps vytvoríme objekt, v ktorom budú uložené nastavenia zobrazovanej mapy.

<source lang="javascript">
var myLatlng = new google.maps.LatLng(49.04349434439 , 17.46688842773);
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
</source>

V objekte myLatlng sú uložené zemepisná výška a šírka oblasti, ktorú chceme zobraziť. V našom prípade sú to Kunovice. V objekte myOptions je nastavenie priblíženia (zoom), miesto na mape, ktoré sa zobrazí (center) a typ mapy (mapTypeid).

Možné hodnoty parametrov nastavenia:
*zoom : 0 až 21
*center : objekt google.maps.LatLng určujúci zemepisné súradnice
*mapTypeId: určuje typ zobrazovanej mapy. Táto hodnota môže byť:
**ROADMAP – zobrazí normálnu 2D mapu
**SATELLITE – zobrazí mapu ako satelitný snímok
**HYBRID – zobrazí kombináciu normálnej a satelitnej mapy.
**TERRAIN – zobrazí reliéfovú mapu.

'''Vytvorenie mapy'''

Najdôležitejšia časť je vytvorenie samotnej mapy:

<source lang="javascript">
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
</source>

Funkcia google.maps.Map má dva parametre. Prvý je HTML element, v ktorom bude mapa vykreslená a druhý parameter sú nastavenia zobrazenie mapy. Odkaz na HTML element získame pomocou funkcie document.getElementById, ktorej parametrom musí byť hodnota atribútu ID elementu v ktorom bude zobrazená mapa. Nastavenia zobrazenie mapy sme si privpravili v prechádzajúcom kroku.

'''Nahranie mapy'''

Samotné nahranie mapy je možné až po kompletnom načítaní HTML stránky, čo zabezpečí nasledovný zápis:

<source lang="html4strict">
<body onload="initialize()">
</source>

Funkcia initialize() obsahuje samotné vytvorenie mapy opisované v predchádzajúcom bode.

===Pridávanie obsahu do máp===

====Pridávanie značiek====
Značky označujú polohu na mape. Pri definícii značky treba uviesť pozíciu na mape, kde sa má zobraziť (parameter position) a mapu, na ktorej sa značka zobrazí (parameter map).
Príklad: V prechádzajúcom príklade pridáme značku na sídlo EPI s.r.o.

<source lang="javascript">
var myLatlng = new google.maps.LatLng(49.0289206601895 , 17.469184398651123);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
</source>

====Čiary na mape====
Do zobrazenej mapy môžeme dokresľovať čiary (polyline), ktoré môžu reprezentovať hranice určitého územia, alebo nejakú cestu.
Konštruktor triedy Polyline má jeden parameter obsahujúci nastavenia cesty (čiary). Toto nastavenie obsahuje zemepisné súradnice bodov, cez ktoré bude čiara prechádzať a vlastnosti čiary ako napríklad jej hrúbka a farba.

Pre čiaru môžeme definovať nasledujúce vlastnoti:
*strokeColor – určuje farbu v hexadecimálnom formáte "#FFFFFF". Farby nie je možné uvádzať iným spôsobom.
*strokeOpacity – Hodnota tejto vlastnosti môže byť od 0.0 do 1.0 a určuje priehľadnosť čiary.
*strokeWeight – hrúbka čiary.

Príklad:

Na mapu nakreslite cestu z pozície značky definovanej v prechádzajúcom príklade k mestskému úradu v Kunoviciach.

Riešenie:

Najdôležitejším krokom je zistiť si súradnice, cez ktoré čiara pôjde. Samotné vytvorenie čiary je nasledovné:

<source lang="javascript">
function initialize() {
var myLatLng = new google.maps.LatLng(49.03459027449849 , 17.467188835144043);
var myOptions = {
zoom: 15,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var flightPlanCoordinates = [
new google.maps.LatLng(49.0289206601895 , 17.469184398651123 ),
new google.maps.LatLng(49.03459027449849 , 17.467188835144043),
new google.maps.LatLng(49.03831808067557 , 17.468132972717285),
new google.maps.LatLng(49.04208780430318 , 17.467424869537354)
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 0.7,
strokeWeight: 3
});

flightPath.setMap(map);
}
</source>

'''Vloženie kruhov a obdĺžnikov'''

Ako vzorový príklad uvedieme situáciu, keď potrebujeme na mape označiť určitú oblasť vo danej vzdialenosti od zadaného bodu. V prechádzajúcom príklade označte oblasť vo vzdialenosti 1km od sídla EPI.

Riešenie:
<source lang="javascript">
function initialize() {
var myLatLng = new google.maps.LatLng(49.0289206601895, 17.469184398651123);
var myOptions = {
zoom: 14,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var oblast = {
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.25,
map: map,
center: myLatLng,
radius:1000
};
var cityCircle = new google.maps.Circle(oblast);
}
</source>

Pri definovaní objektu oblasť je treba určiť štýl čiary kruhu a štýl výplne kruhu. Pri oboch štýloch máme k dispozícii farbu, priehľadnosť a pri čiare aj hrúbku.
Parameter center určuje stred kruhu. Polomer je daný parametrom radius. Jeho hodnota predstavuje polomer kruhu v metroch.

Výsledok:
[[Súbor:jednoducha mapa a kruh.png|center|400px]]

==Static Maps API==
Toto API dovoľuje použiť mapy len pomocou URL adresy. Vygenerovaná URL adresa sa môže použiť ako atribút src v HTML elemente img.

Obmedzenia:
*pri použití statických máp je povolené zobrazenie jednej mapy s obmedzením 1000x za deň.
*Použitie máp inde ako vo web browseri je zakázané

'''URL parametre'''

Základnou adresou pre generovanie máp je http://maps.google.com/maps/api/staticmap?parameters

Static Map API používa nasledovné parametre:

'''Parametre polohy:'''
*center (povinný): definuje stred mapy. Udáva sa zemepisná výška a šírka oddelené čiarkou (napríklad "40.714728,-73.998672"), alebo adresa (napríklad "Osvobození 699, Kunovice")
*zoom (povinný): určuje priblíženie.

'''Parametre mapy:'''
*size (povinný): definuje rozmery mapy. Formát zadávania rozmerov je "SIRKAxVYSKA". Tieto hodnoty sú v pixeloch.
*format: určuje typ vygenerovaného grafického súboru. Možné hodnoty: GIF, JPEG, PNG
*maptype: definuje typ mapy. Možné hodnoty sú: roadmap, satellite, hybrid.
*Language: jazyk pre zobrazenie textu v mapách.

'''Doplňujúce parametre:'''
*sensor (povinný) : Hodnota môže byť true alebo false. Hovorí o tom, či aplikácia automaticky zisťuje polohu na mape.

Príklad: Vytvorte mapu Kunovíc pomocou statických máp.

Riešenie:

Hodnoty jednotlivých parametrov:
<source lang="text">
center=49.0289206601895,17.469184398651123
zoom=15
size=300x200
sensor=false
</source>
URL odkaz použitý v HTML elemente img:

<source lang="html4strict">
<img src="http://maps.google.com/maps/api/staticmap?center=49.0289206601895,17.469184398651123&zoom=15&size=300x200&sensor=false" title="mapa"/>
</source>

Google Maps API - História úprav

Juraj: Vytvorená stránka „{{Navigacne menu - webovske technologie}} Google Maps obsahuje viacero rozhraní API, ktoré vám umožnia vložiť funkčnosť Google máp do vlastnej aplikácie. V súča…“