Google Maps API

Z Kiwiki
Skočit na navigaci Skočit na vyhledávání

Webovské technológie

HTML

CSS - kaskákové štýly

JavaScript

PHP

XML

Google API

>Google Charts
>Google Maps API

Java

Java applety

Java servlety

Webové služby

.NET framework

ASP .NET

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: 

<!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>

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

Jednoducha mapa.png


Vysvetlenie:

Definícia typu aplikácie

HTML aplikácia je definovaná ako HTML5 (<!DOCTYPE html>). 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é: 

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

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 <meta> 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: 

 <div id="map_canvas" style="width:100%; height:100%"></div>

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. 

var myLatlng = new google.maps.LatLng(49.04349434439 , 17.46688842773);
var myOptions = {
  zoom: 15,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

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: 

   var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

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: 

 <body onload="initialize()">

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. 

  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!" 
  });


Č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é: 

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); 
}


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: 

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); 
}

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:

Jednoducha mapa a kruh.png

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: 

center=49.0289206601895,17.469184398651123
zoom=15
size=300x200
sensor=false

URL odkaz použitý v HTML elemente img: 

<img src="http://maps.google.com/maps/api/staticmap?center=49.0289206601895,17.469184398651123&zoom=15&size=300x200&sensor=false" title="mapa"/>
Zdroj: „http://www.kiwiki.info/index.php?title=Google_Maps_API&oldid=9842“