Google Maps on mahtava karttapalvelu. Sen avulla voi vaikkapa näyttää missä suomalaiset goottikaupat sijaitsevat. Tuollaisen karttasysteemin valjastaminen Textpatternilla päivitettäväksi on loppujen lopuksi melko yksinkertaista. Tarvitaan vain:
Gootti.net:in Goottikaupat kartalla -osion päivittäminen hoidetaan TXP:n kautta. Kartalla näkyvien kohteiden lisääminen, poistaminen ja muokkaaminen on yhtä helppoa kuin minkä tahansa artikkelin hallitseminen TXP:n avulla.
Näin on. Nyt voisin jättää kertomatta miten tämä on mahdollista. Voisin olla neuvomatta tarkemmin. Ihan kiusallani.
Mutta nyt palatkaamme kuitenkin käsiteltävänä olevan asian pariin. Google Maps -systeemin käyttäminen on melko helppoa, kunhan ensin viitsii tutustua systeemin takana toimivaan rattaistoon. Kartan laittaminen nettisivulle vaatii ensin pikaisen toimenpiteen suorittamisen Google Maps API:n suunnalla. Haetaan sieltä halutulle nettisivulle jonkinlainen sarjanumero (virallinen termi lienee Maps API key). Koodilitanian hakeminen onnistuu nopeasti. Ensin lukaistaan palvelun käyttöehdot, hyväksytään ne, jonka jälkeen ilmoitetaan sen nettisivun URL-osoite, jolle anotaan sarjanumero. Sitten lähetetään lomakkeen tiedot napsuttamalla "Generate API key" -nappulaa. Sen jälkeen kun em. lomakkeen tiedot on lähetetty, saadaan esiin karttapalvelun sarjanumero ja kaikenmaailman ohjeistuksia. Otetaan ainakin se sarjanumero talteen. Otetaanpas vielä ne muutkin ohjeet säilöön, kun eihän sitä tiedä miten pieleen näillä minun ohjeillani mennään…
Karttahan saadaan nettisivulle näkyviin laittamalla juuri haettu sarjanumero nettisivun lähdekoodin <head></head>-osion väliin. Lisättävä koodirivi näyttää todennäköisesti / jokseenkin tältä:
<script src="http://maps.google.com/maps?file=api&v=
1&key=tahan-sarjanumero" type="text/javascript"></script>
Yllä näkyvä koodiesimerkki pitää sisällään rivinvaihtoja, joten tuo ei tuollaisenaan toimi. Lisäksi siitä puuttuu toimiva sarjanumero. (Eli koodirivin voi toki kopioida, mutta siihen kannattaa vaihtaa toimiva sarjanumero ja poistaa turhat rivinvaihdot.)
Nyt kun olemme saaneet näin paljon aikaiseksi, voisimme käydä vaikka jääkaapilla hakemassa evästä. On vielä paljon tekemistä, jotta kartta toimisi.
Kartan lähdekoodin sisältöalueelle, ts. <body></body>-palikan väliin, laitetaan haluttuun kohtaan ensin tällaista:
<div id="map" style="height: 100px; width: 100px;"></div>
Tämä koodi on se alue, mihin kartta tulostetaan. Se paikka, mihin kartta tulee näkyviin. Kartta sijoitetaan div-pömpelin sisään. Tässä esimerkkimerkkauksessa kartan kokoa ja leveyttä säädetään CSS-merkkauksen avulla, joka on muljaistu div-elementin sisään. Kartassa on oletusarvoisesti id-selektori, jonka arvo on map. Kun kerran selektori, joka muuten on aika hieno sana, löytyy, siihen voidaan tarttua esim. ulkoisen CSS-tiedoston kautta. Tämän nimenomaisen ja kyseessä olevan div-mötikän sisälle voidaan laittaa tavaraa. Voidaan laittaa esimerkiksi joku teksti-ilmoitus, tyyliin: “Jos näet tämän, karttapalvelu ei toimi.”. Siis esimerkiksi näin:
<div id="map" style="height: 100px; width: 100px;"><p>Kun kerran näet tämän, et näe karttaa. Harkitse paremman nettiselaimen hankkimista.</div>
Jos karttasysteemi toimii, se peittää koko div-palikan alueen ja piilottaa tekstin ja todennäköisesti muut sinne sijoitetut roinat alleen. Karttasysteemihän toimii hyvin pitkälti JavaScript-koodin avulla. Mikäli käyttäjän nettiselaimessa on JS:n suorittaminen evätty, silloin kartta ei toimi.
Tämä juttu onkin odotettua laajempi selittää ja esitellä. Seuraavassa jaksossa laitamme kartan näkymään aikaisemmin mainitun div-elementin kohdalle. Käsittelemme mahdollisesti myös kohteiden lisäämistä kartalle, tai vaihtoehtoisesti sitä miten paljon pikakahvia vatsalaukkuni vetää.
Tämän julkaisun kommentointi on suljettu.
Kun tämän julkaisun kommentointi oli vielä avoinna, tälle julkaisulle kirjoitettiin yhteensä 4 kommenttia. Tämä artikkeli on lokeroitu kategoriaan Textpattern. Tämän julkaisun kestolinkin osoite on http://www.kuopassa.com/weblog/2006/12/27/google-maps-ja-textpattern-osa-1.
Gocom kirjoitti 503 päivää sitten:
Hehe, jotenkin oudolta tämä tuntuu, kun minä tämän homman tein eilen, mutta oikeastaan en kartalla mitään tehnyt niin poistin tekeleeni heti alkuunsa julkisuudesta. Itse käytin karttaa vierailijoiden osoitteiden näyttämiseen, mutta koska se tuntui aika turhalta niin poistin sen :-)
Tuli muuten vielä mieleen. Jos joku on todella laiska eikä jaksa kirjoittaa tuota div id=“map” -palinkan sisälle selitystä, miksi karttaa ei näy, on tähän luotu txp:n pluginikin joka tuommoisen tekstin valmiina sisältää. Tosin itsessään se plugini on turha – todella turha :)
Näistähän sinun oppaistasi voisi oikeastaan tehdä oikein pdf-muodossa olevan opassarjan :P
Petri kirjoitti 503 päivää sitten:
Tarkoitatko viritelleesi sellaista karttaa, missä näkyy vierailijoiden katuosoite? Sellainen olisi hieno kyhäelmä. Jos tosiaan vierailijoiden katuosoitteita tarkoitit, niin miten ihmeessä saat kaivettua tarvittavat tiedot? IP-osoitteestako? Tässä kommentissa on näin paljon kysymyksiä sen takia kun en tiedä mistään mitään. :-)
Joskus kesällä oli tarkoitus luoda blogimerkinnöistä iso möhkäle, sellainen PDF-filu, missä on hyödyllisimmät bloggaukset yhdessä paketissa. Jäi kuitenkin toteuttamatta kun niitä ns. “hyödyllisiä” blogimerkintöjä on niin vähän.
Gocom kirjoitti 503 päivää sitten:
Juu, IP-osoitteiden avullahan se toimii. Google Mapissahan on ihan valmiina tuokin mahdollisuus.
Rss-googlemap_stats plugin mahdollistaa TXP:n logeista IP-osoitteiden hakemisen.
Juho kirjoitti 500 päivää sitten:
Nyt rupesi kiinnostamaan. Eikai sitä tuostavaan voi ip:llä kenenkään kotiosoitetta selvittää? :O