Interaktiivinen Google Maps -kartta sivuillesi

Epävirallinen opas, jonka kirjoitti Esa. Päivitetty kakkosversion syntaksille: huhti -06. Modernisoitu heinä -09.


Näitä ohjeita noudattaen saat upotettua Google Maps ajax-kartan webbisivullesi ilman aikaisempaa JavaScript-kokemusta. Reilussa puolessa tunnissa kartta näkyy sivuillasi. Ohjeet version 2 syntaksilla.
  1. Hae Google Maps API avain

    Avainta haettaessa sinulta kysytään sivustosi URL. Pelkkä domain-osa riittää (esim. http://koti.mbnet.fi). Sama avain pätee silloin koko sivustoosi.

    Saat tämän näköisen koodin:

    Siitä on editoitava &sensor=true_or_false jompi kumpi pois. 99% sivuista se kuuluu olla sensor=false. Sensor tarkoittaa esim. GPS-paikannusta sivun koodissa.

    Kartan käyttöliittymän saa nykyisin suomeksikin lisäämällä kieliparametrin:

    &hl=fi

    Siis:

  2. Tunge muokattu avainkoodi sivusi lähdekoodin <head>-osaan.

    Eli jonnekin <head>ja </head>-tagien väliselle alueelle.
  3. Tee kartallesi paikka sivulla

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

    Editoi <div>:n tyylimääritteistä kartan koko. Koko on varminta määritellä tässä. Jos se tehdään erillisessä CSS-osassa tai erillisessä CSS-tiedostossa, niin tieto kartan koosta saattaa tulla API:lle myöhässä. (Tyypillinen IE-ongelma).

    Tervetuliaisteksti näkyy pienen hetken sivun latautuessa kunnes api pyyhkii sen pois ja pistää karttaruutuja tilalle.
  4. Tarvitset koordinaatit

    jotka saat vaikkapa tästä.

    Kartta latatuu...

    Hae osoitteella tai paikkakunnan nimellä. Varminta on kirjoittaa loppuun myös 'Suomi' tai maatunnus 'fi'. Koordinaatteja voi tarkentaa raahamalla nuppineulaa.

  5. JavaScript

    Palauta

    Muuta (60.175,24.926) omiksi kartan keskipisteen koordinaateiksesi ja 15 haluamaksesi zoom-tasoksi. Editoinnin voit tehdä tässä.

    Sijoita JavaScript-osuus html-koodisi loppuun, vaikkapa juuri ennen </body>-tagia.
  6. Julkaise

    kartta latautuu...


    Helppoa kuin heinän teko. Jos et editoinutkaan parametrejä, sivullasi pitäisi olla samanlainen Töölön kartta kuin yllä.

  7. Nuppineula ja infoikkuna

    Seuraavassa koodiin on lisätty kahden nuppineulan vaatimat lisärivit. Tarvitset koordinaatit kullekin neulalle ja mahdollisen sisällön puhekuplaan. Infokuplaan voi sijoittaa kaikkea, mitä html-koodilla saa aikaan: linkkejä, kuvia, vaikka toisen kartan. Tekstikenttää voi käyttää editointiin.

    Palauta

  8. Julkaise

    kartta latautuu...

    Nyt kun kartta on isompi (440px x 320px), api laittoi automaattisesti isommat hallintalaitteet.

  9. Opiskele lisää

  10. Edistyneempi esimerkki

    Koordinaattien hakukartan koodi kommentoituna. Palauta