Dodajanje Google zemljevida na spletno stran

Ustvari preprosto HTML stran.

V <body> je potrebno dodati element

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

V tem elementu se bo prikazal Google zemljevid.

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>

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

Prikazati bi se moral siv okvir.

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.

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>

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

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

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>

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.

Priporočamo

Merjenje razdalje in časa poti v Google Maps

S posodobitvijo Google Maps zemljevidov je prišel tudi nov način, kako na zemljevidu merimo razdalje in čas poti med dvema ali več točkami.


Zmaga.com na Facebooku \| Pošljite nam e-pošto \| Informacije o Zmaga.com