Google Maps ja Textpattern: osa 2.

Julkaistu: 20.01.2007
Kategoria: Textpattern
Kommentointi suljettu. (2)

Tässäpä teille Google Maps & Textpattern -sarjan toinen osa. Yritetään hahmottaa miten Google Maps -karttapalvelua voisi hyödyntää mahdollisimman vähäisellä vaivannäöllä omassa blogissa tai muussa verkkopalvelussa. Pistetään karttasysteemi toimimaan Textpatternilla, jotta karttakohteiden lisääminen, muokkaaminen ja poistaminen onnistuisi joutumatta itse räpläämään kartta-alueen lähdekoodia. Annetaan Textpatternin tehdä työ puolestamme — sidotaan ensin karttatoiminto ja TXP toisiinsa.

Edellisessä tätä asiaa käsittelevässä blogimerkinnässä vähän pohjustettiin ja alustettiin Google Maps -karttojen lisäämistä nettisivuille. Tarvitaan tosiaan API-avain, joka on ilmainen ja jonka saa haettua Googlen karttapalvelusta parilla napinpainalluksella. API-avainkoodin hakemisen jälkeen se lisätään nettisivun lähdekoodiin, <head></head>-osion sisään… Kannattaa lukea blogimerkintä “Google Maps ja Textpattern: osa 1”, sillä sieltä löytyy aika selväkielisesti ohjeet API-koodin liittämiseksi nettisivun lähdekoodiin, kuin myös kartta-alueen määritteleminen sivun lähdekoodiin.

Kartan tekeminen

Otetaan mallia Gootti.net-sivustolla löytyvästä karttapalvelusta, missä listataan suomalaisten goottikauppojen ja muiden samanhenkisten liikkeiden sijainnit kartalla. Se on toimiva esimerkki.

Kartta-alue määritellään vaikkapa näin:

<div id="map" style="width:500px; height: 500px"></div>

Kartta tulee siis näkyviin 500 kuvapikseliä leveänä ja korkeana. Kartta on niin iso tai pieni, leveä tai korkea, kuin mikä sille ilmoitetaan CSS:n avulla.

Jos käyttäjän nettiselaimessa ei ole JavaScript-koodin suorittaminen sallittu, tällöin karttaa ei näytetä. Voidaan tunkea tuonne div-parin väliin jotain tekstiä tai kuvaa siltä varalta, että tuo JS on pois käytöstä (tai jos nettiselain ei jostain muusta syystä kykene näyttämään karttaa):

<div id="map" style="width:500px; height: 500px"><p>Hei! Oi ei! Nyt ei kartta taida toimia. Käy sen sijaan katsomassa staattista karttakuvaa <a href="#">täällä</a>.</p></div>

Tuossa esimerkissä siis kartta-alueen sisälle on laitettu tekstikappale, jossa lukee:

Hei! Oi ei! Nyt ei kartta taida toimia. Käy sen sijaan katsomassa staattista karttakuvaa täällä

Esimerkkitekstin linkki ei johda mihinkään, mutta senhän voisi linkittää esim. kartasta otettuun kuvakaappaukseen tai johonkin vaihtoehtoiseen palveluun. Tai sitten linkkiä ei lainkaan laiteta sinne. Ei ole pakko.

Vielä ei kartta kuitenkaan toimi. Sehän tarvitsee nimittäin hieman lisätietoja. Lisätietoja voi hakea vaikkapa suomenkieliseltä ohjesivulta, missä selostetaan hyvinkin yksinkertaisten karttojen tekeminen.

Nyt sitten vähän sisäistetään noita juttuja. Ajatellaan ja pohditaan ja käydään mahdollisesti kahvilla, laitetaan pari riviä lottoa ja toivotaan sieltä tulevan järjettömästi rahaa. Sitten kun huomataan, ettei pääpottia taaskaan tullut, ja unelmat jäävät unelmiksi, voidaan keskittyä taas tähän karttajuttuun. Huokaistaan vielä syvään. Jatketaan.

Kartta toimii sitten kun sen yhteyteen laitetaan lisää koodia. Koodi voi näyttää tältä:

<script type="text/javascript">
//<![CDATA[
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(63.598358,24.571836), 5);
map.setMapType(G_NORMAL_MAP);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
//]]>
</script>

Yllä näkyvä koodi voidaan panna esim. kartta-alueen alapuolelle nettisivun lähdekoodissa.

map.setCenter(new GLatLng(63.598358,24.571836), 5);

Tämä ylle laitettu koodirivi tarkoittaa kartta-alueen aloituspaikkaa. Siinä on latitudi (leveysaste) ja longitudi (pituusaste). Latitudi on esimerkissä tällainen numerolitania: 63.598358 ja se erotetaan pituusasteesta pilkulla, eli pituusaste on leveysasteen oikealla puolella. Lisäksi koodirivissä näkyy numero 5. Se tarkoittaa Google Maps -kartan zoomausta. Ilmeisesti Google Maps -kartan zoomaus voi olla enintään 16 — jos kartan aloituspaikan zoomaus on 16, se tarkoittaa kartan olevan mahdollisimman lähellä Telluksen pintaa. Tellus tarkoittaa tätä planeettaa.

Seuraavaksi varmaan kysytte mitä nämä koodirivit tarkoittavat:

map.setMapType(G_NORMAL_MAP);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());

No sitä minä en tiedä. Kai niillä joku funktio on.

map.setMapType(G_NORMAL_MAP);

Tämä tarkoittaa mahdollisesti sitä karttanäkymää, mikä on kartta-alueella käytössä. Tässä esimerkkikoodissa on perinteinen kartta, jossa näkyy kaikenmaailman tiet ja risteykset ja kadunnimet. Google Maps -kartassa voidaan em. karttanäkymän lisäksi valita sellainen satelliittikuvista koostettu kartta (siinä ei näy teiden nimiä). Kolmas vaihtoehto on hybridikartta, joka on satelliittikuvista koostettu kartta, missä esitetään myös teiden nimet yms.

map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());

Näillä ilmeisesti määritellään minkälaisia painikkeita ja navigointivälineitä kartta-alueen oikeaan ja vasempaan yläkulmaan tulee näkyviin. Navigointivälineillä viittaan nuolipainikkeisiin, joilla kartassa voi siirtyä suunnasta toiseen, sekä zoom-nappuloihin. Jälkimmäisiä nappuloita nylkyttämällä kartta-alueen zoomausta voi vaihtaa.

Eiköhän tässä ollut tarpeeksi tälle päivälle. Seuraavassa jaksossa jalostamme karttaa lisäämällä siihen karttapisteitä. Toivottavasti jossain vaiheessa saadaan nämä löpinät hoidettua pois alta ja käsiteltyä myös kartan kytkemistä Textpatterniin.

Tagit: google, txp

Petteri kirjoitti 473 päivää sitten:

Meinaako Petri päästä helpolla ja lähteä “mestoille”, kun ei ole kuulunut niin hirveesti mitään? Vai onko joku salainen projekti tekeillä, jonka paljasta olevan maailman suurin läpimurto internetissä?

Mä oon miettinyt tosissani sitä TXPFi-projektia, niin paljon, että koko projekti on muuttunut TXO-opaskasasta, uuden sukupolven verkkolehdeksi, nimikin on muuttunut (STY= Suomen Textpattern yhteisö). Ulkoasukin alkaa hahmottua, tyylikäs ja yritysmäinen, mutta lämmin ja kotoisa. Ostan kuvat stock xpertistä ja domainin ja kotisivutilan ostan Datamapilta.

Nyt vain on niin pirunmoinen kiire monen projektin kanssa, että odotan suurten rahojen tulevan lähiaikoina, sitten perustetaan yhteisö, jonka muutan Ry:ksi tulevaisuudessa.

Niin… ja sä tuut mukaan.
Petri kirjoitti 473 päivää sitten:

Mestoille? Mihin mestoille? Höhhöh. Olen vähän yksinkertainen. En ole lähdössä mestoille tai oikeastaan mihinkään, paitsi maanantaina uutta asuntoa katsomaan. Uusia projekteja ei ole käynnissä, eli noita vanhoja sivustoja kehittelen ja yritän tehdä sen suuren läpimurron niiden avulla.

Hyvä kun mainitsit siitä TXP-projektista. Ehdin jo luulla, että olet kuopannut idean. Voin mielelläni lähteä sivustoa & yhteisöä rakentamaan, kunhan pidät käskynjaon ja kerrot mitä pitää tehdä. :-)

Tämän julkaisun kommentointi on suljettu.

Kun tämän julkaisun kommentointi oli vielä avoinna, tälle julkaisulle kirjoitettiin yhteensä 2 kommenttia. Tämä artikkeli on lokeroitu kategoriaan Textpattern. Tämän julkaisun kestolinkin osoite on http://www.kuopassa.com/weblog/2007/01/20/google-maps-ja-textpattern-osa-2.

Blogmaster:

Petri Ikonen, petri.ikonen@kuopassa.com, www.kuopassa.com

Korinaa kuopasta — On weblog.