Interaktiivinen kartta nettisivuillesi     

An unofficial tutorial by Esa. Not officially authorised or approved by Google®. Tested in real world applications.



Näitä yksinkertaisia ohjeita noudattaen saat upotettua Google Maps -kartan nettisivuillesi. Reilussa puolessa tunnissa kartta näkyy sivuillasi. Toinen mokoma, ja kartalla on nuppineuloja, joista avautuu infoikkuna.
  1. Suunnittele karttasi.

    Mitä aiot näyttää? Seuraavat asiat kannattaa päättää ennen lähdekoodiin kajoamista:
    • kartan keskikohdan koordinaatit (lng,lat)
    • zoom asetus 0...17
    • kartan mitat (width, height) pixeleissä
    • karttanäytön tyyppi(map/satellite/hybrid)

    Voit myös valita:
    • näytetäänkö karttatyypin valintapainikkeet
    • zoom liukusäädin tai pienet ohjauspainikkeet

    Näiden asioiden valitsemista helpottamaan on suunnittelun apusivu.
    • oikean paikan löydät nopeiten raahaamalla vasenta karttaa
    • päätä koko
    • päätä zoom
    • ota koordinaatit muistiin

  2. Hae Google Maps API avain

    Avainta haettaessa sinulta kysytään sivustosi URL. Sama avain pätee koko hakemistoon.

  3. Tunge API-avaimen sisältämä koodi sivusi lähdekoodin <head>-osaan.

    Siis jonnekin <head>ja </head>-tagien väliselle alueelle.

  4. Mene html-koodisi loppuun

    Varsinainen JavaScript-osuus on viisainta sijoittaa html-koodin loppuun, vaikkapa juuri ennen </body>-tagia; Sijoita seuraava koodi:

  5. Editoi koodin parametrit

    • Laita halutut keskikohdan koordinaatit riville:
      map.centerAndZoom(new GPoint(-72.585, 42.102), 2);
      
      Muuta (-72.585, 42.102) omiksi koordinaateiksesi (long, lat) pilkulla erotettuna ja desimaalimuodossa. Muuta 2 haluamaksesi zoom-tasoksi.

    • Karttatyyppi valitaan rivillä:
      map.setMapType(G_MAP_TYPE) ;
      
      Valitse (G_MAP_TYPE), (G_SATELLITE_TYPE) tai (G_HYBRID_TYPE)

    • Ohjauspainikkeiden tyyli valitaan rivillä:
      map.addControl(new GSmallMapControl());
      
      vaihtoehtoina GLargeMapControl (liukupotikka), GSmallMapControl ja GSmallZoomControl (pelkät +/- zoom-painikkeet pieniin karttoihin)

  6. Aseta kartta haluamaasi kohtaan sivulla

    Sijoita seuraava koodi sivullesi haluttuun kohtaan. Se voi hyvin olla taulukon sisällä:

    Editoi <div>:n tyylimääritteet. Ainakin koko, mutta voit myös reunustaa kartan. Tyylimääritteet voivat tietysti olla sivun alun CSS-osassa tai CSS-tiedostossa.

  7. Julkaise

    kartta latautuu...


    Yleensä kaikki onnistuu kerralla. Jos et editoinutkaan parametrejä, sivullasi pitäisi olla samanlainen Springfieldin kartta kuin yllä. Jos et näe tässäkään karttaa, vaan tekstin 'kartta latautuu...' on selaimessa vikaa. Google Maps vaatii suht. tuoreen selaimen ja JavaScript pitää olla sallittuna. Jos kartasta näkyy vain alareunan tekstejä, on selaimesta estetty muilta sivuilta tulevat kuvat.


    Alkuosassa saimme nettisivulle ilmestymään zoomattavan ja liikuteltavan kartan, nyt siihen voisi lisätä merkintöjä. Varaa taas reilu puoli tuntia aikaa.

  8. Nuppineula

    Käy määrittelemässä merkittävien kohteiden koordinaatit suunnittelun apusivulla. Ota koordinaatit muistiin.

  9. Mene taas html-koodisi Javascript-osaan

    Siellä olevaan karttakoodiin lisätään seuraavat rivit:
    var point = new GPoint(-72.587, 42.1);
    var marker = new GMarker(point);
    map.addOverlay(marker);
    
    Koko koodin pitäisi nyt näyttää:

  10. Jos haluat useampia nuppineuloja

    Monista äsken lisättyjä kolmen rivin kokonaisuuksia haluttu määrä.

  11. Editoi koordinaatit

  12. Julkaise

    kartta latautuu...


    Yleensä kaikki onnistuu kerralla.

  13. Infokuplat

    Vaikeusaste kasvaa. Infokuplat vaativat hieman lisää koodia ja ennen kaikkea tarkkuutta. Pienikin virhe ja kartta jää latautumatta. Muodostamme ensin funktion nuppineula :
     
    function nuppineula(point, html) {
    var marker = new GMarker(point);
    GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(html);});
    return marker;}
    
    Ja muutamme muuttujan marker käyttämään tätä funktiota. Eli kahden nuppineulan koko JavaScript:

    Infokuplien tekstiin käy normaali html-koodaus. Pari sudenkuoppaa täytyy mainita:

    • Html-koodissa ei saa olla rivisiirtoja. En tarkoita <br>-tageja, vaan koodia kirjoittaessa lyötyjä rivisiirtoja.
    • Lainausmerkeissä on JavaScript-säännöt. Koodi on nyt yksinkertaisten lainausmerkkien sisällä, joten käytä html-koodin sisällä tuplalainausmerkkejä tai päinvastoin.
    • Infokuplaan voi sijoittaa kaikkea, mitä html-koodilla saa aikaan: linkkejä, kuvia, vaikka toisen kartan. Paikka vain on herkkä. Syntaksivirhe estää koko kartan latautumisen.
    • Testaus on syytä tehdä kaikilla yleisimmillä selaimilla.

    kartta latautuu...

    Karttaa piti vähän suurentaa. Se on nyt 400 x 300 pikseliä. Infokuplat tarvitsevat tilaa.

  14. Selaimissa on eroja

    Kun Firefoxin versionumero muuttui 1.5:ksi, sen käytös muuttui info-ikkunoiden osalta. Se pyrkii aiheuttamaan omapäisiä rivisiirtoja infokuplan tekstiin. Sama ongelma koskee Operaa ja samantapainen Safaria. Toistaiseksi (joulukuu 2005) ongelma on minimoitavissa kirjoittamalla kartan tyylimäärittelyihin: white-space:nowrap. Siis:

  15. Opiskele lisää

    Google Maps APIn virallisesta dokumentaatiosta löytyy paljon lisäominaisuuksia ja mahdollisuuksia JavaScript-osaajille.

  16. Linkkaa minut

    Oliko näistä ohjeista iloa? Laita linkki sivullesi.
    <a href="http://koti.mbnet.fi/ojalesa/tutor/karttasivu.html">
    ohjeet: kartta nettisivulle</a>
    
    Tulen kirjoittamaan lisää niksejä.

    Suunnittelusivu  |   Palaute