Kliknite tukaj, da si ogledate profil, kot ga vidijo drugi

Dodajanje Google zemljevida na spletno stran

Delite vsebino na Facebooku
Delite vsebino na Twitterju
  Dodajanje Google zemljevida na spletno stran je zelo preprosto. V tej lekciji vam bomo korak za korakom pokazali, kako dodati Google zemljevid z uporabo JavaScript API.
 
 
1
 
 

Ustvari preprosto HTML stran.

V <body> je potrebno dodati element

<div id="map_canvas"></div>


V tem elementu se bo prikazal Google zemljevid.

 
 
2
 
 

Z uporabo CCS v <head> definiraj <style>, v katerem so mere za višino in širino map_canvas okna. Dodajmo še sivo barvo za ozadje map_canvas  okna.

<style>
  #map_canvas {
    width: 500px;
    height: 400px;
    background-color: #CCC;
  }
</style>

 
 
3
 
 

Shrani kodo in jo odpri z brskalnikom (to je samo vmesno preverjanje).

Prikazati bi se moral siv okvir.

 
 
4
 
 

 Uvozi Google Maps API, tako da v <head> dodaš

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

Ta skripta naloži kodo, potrebno za prikaz zemljevida na vaši strani.

Sensor je parameter, ki ga uporabljamo v primerih GPS oz. ko detektiramo lokacijo uporabnika. V takih primerih morate vrednost spremeniti na true.

 
 
 
 
 
5
 
 

Koda vsebuje funkcijo, ki se izvrši ob nalaganju strani in se imenuje initialize.

Dodajte ta košček kode za <script> iz prejšnjega koraka.

<script>
  function initialize() {
    var mapCanvas = document.getElementById('map_canvas');
    var mapOptions = {
      center: new google.maps.LatLng(46.055556, 14.508333),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(map_canvas, map_options);
  }
</script>


 
 
6
 
 

google.maps.Map objekt

Prvo stvar, ki jo naredi initialize funkcija je to, da ustvari nov Google Maps objekt

var map = new google.maps.Map();

 
 
7
 
 

Map objekt je sestavljen iz dveh argumentov:

- Sklicevanje na <div>, v katerega bo zemljevid naložen. Za to bomo uporabili getElementById funkcijo.

- Razne možnosti za karte, kot so definiranje centra, stopnja povečave ter vrsta karte. Seveda obstaja več možnosti, vendar so te tri obvezne.

center - definira center prikazanega zemljevida
zoom - nastavljamo od 0 do 22
mapTypeId - možnosti so ROADMAP, SATELLITE, HYBRID in TERRAIN

 
 
8
 
 

Zadnji korak je izvajanje JavaScript funkcije.

Dodaj v kodo

google.maps.event.addDomListener(window, 'load', initialize);

Ta poskrbi za klicanje initialize funkcije. Napiši jo za function initialize

      function initialize() {
        ...
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>


 
 
9
 
 

Tako, zadeva je zaključena.

Shrani v HTML obliki in odpri z brskalnikom in na strani se bo prikazal Google zemljevid.

Celotna koda je odložena na povezavi http://zmaga.com/prenosi/maps.zip.
 
 
 
 
Komentiraj
 
 
Prijava in registracija
 
 
 
Zmaga.com ponuja brezplačno in razumljivo učenje računalniških programov, vas na enkraten način spozna z različnimi svetovnimi jeziki, s podrobno obrazloženimi recepti prikaže čare kulinarike in vam prežene strahove pred domačimi opravili.
 
 
Poleg tega lahko prebirate poučne članke, ki so namenjene širjenju naše splošne razgledanosti ter preverite svoje znanje z priljubljenim in enostavnim sistemom za preverjanje znanja. Če med vsebinami, ki se dodajajo vsak dan, ne najdete želenega znanja, je za vaša vprašanja na voljo dobro obiskan forum, kjer lahko tudi aktivno sodelujete. V primeru, da bi radi svoje praktično znanje delili z ostalimi, pa to lahko storite preko preprostega vmesnika za dodajanje vsebin. Zmagajte z znanjem z Zmaga.com!