ugrás a tartalomhoz

PlayMaps: kattintásra induló interaktív térképek

Török Gábor · 2008. Már. 11. (K), 23.05
A Google Maps technológiájára épülő térképmegoldások hada áll a rendelkezésünkre. A nyílt API-nak köszönhetően a legkülönfélébb felületek hozhatók létre programozottan, de az utóbbi időkben további felhasználási lehetőségeket is kibocsátottak, amelyek egyszerűen beilleszthetővé tették a térképeket webes alkalmazásunkba, akár különösebb szakértelem nélkül.

Az egyik ilyen a Maps webes felületén megjelent megosztás funkció, amely segítségével tetszőlegesen megválasztott, segédpontokkal, információsablakokkal támogatott térképrészletet illeszthetünk iframe-ként a weboldalba. Ezen szolgáltatás eléréshez legfeljebb Google ügyfélfiókkal szükséges csak rendelkeznünk.

Egy másik alternatíva a Maps Search Wizard program, amely egy térképkereső alkalmazást valósít meg a honlapunkon belül. Az előbb említett verziót tekintve jóval rugalmasabb, hiszen lehetővé tesszük a látogatók felé, hogy saját keresőkifejezésükkel további információhoz juthassanak, mégsem szükséges viszont hozzá olyan programozott apparátus, amely a hagyományos értelemben vett Maps API működéséhez kell(het). A megoldáshoz rendelkeznünk kell fejlesztői API kulccsal. A Maps Search Wizard által generált felület egyetlen hátránya, hogy amikor nem fő funkció az oldalon a térkép, hanem inkább kiegészíti a tartalmat, jelentősen lassítja a felület betöltődését és megjelenését, nagyban rontja az össz felhasználói élményt.

Ezen hátulütő orvoslására lehet segítségünkre a napokban közzétett, blogmark formájában már a Weblaboron is hivatkozott Google Static Maps API. A szolgáltatás célja, hogy egy felparaméterezett HTTP GET lekérdezés eredményeképpen visszaadjon egy statikus térképrészletet GIF formátumú képként. A felhasználónak ebben az esetben semmilyen interakcióra nincs lehetősége, ellenben egy gyorsan betöltődő tartalmat kap cserébe, s adott esetben lehet, hogy nem is kíván élni a interaktív térkép nyújtotta többlettel.

Ezek ismeretében a célom egy optimális esetben gyorsan betöltődő, interaktív térképpel gazdagított felület volt. Nincs másra szükségünk tehát, mint összekapcsolni a két utóbb említett technikát, és a videótartalmak közlésének analógiájára egy kattintásra "induló" térképet készíteni.

Kattintásra »induló« térképrészlet statikus képként beágyazva


A minap a blogomban vázolt PlayMaps fantázianevű elképzelés fő gondolata abban rejlik, hogy alapértelmezetten a kívánt oldalakra a Google Static Maps API segítségével statikus térképeket illesztünk be, amelyeket a még gyorsabb kiszolgálás érdekében gyorstárazhatunk is. Az oldal betöltődésekor lefutó JavaScript kód – a Lightbox működésének mintájára – feltérképezi a playmaps stílusosztállyal megjelölt képeket, és föléjük helyez egy lejátszó gombot, amire kattintva az ezidáig statikus térkép helyére betöltődik a dinamikus barangolást lehetővé tevő Google Map Search komponens. A gyorsabb letöltődésen és weboldal renderelésen túl járulékos előny, hogy a statikus térképrészleteket JavaScript támogatással nem rendelkező környezetben is megtekinthetjük, adott esetben akár le is menthetjük.

A PlayMaps jelenleg demonstrációs fázisban tart, szívesen veszek mindennemű visszajelzést, ötletet. Első hiányosságként célom a Static Maps API-ban opcionálisan megjelölt markerek automatikus átültetése az interaktív térképekre is.
 
1

A megoldás nagy main.js letöltés nélkül

Peti_ · 2008. Már. 12. (Sze), 01.12
Itt van egy olyan megoldás is, ami csak szükség esetén tölti le a ~70kbos googlemaps main.js-t.
2

Király

Török Gábor · 2008. Már. 12. (Sze), 01.22
Köszönöm, kerestem, de nem találtam ezt a projektet. Egyetlen hátránya habár, hogy teljesen JS alapú.
6

js alapú

kmm · 2008. Már. 17. (H), 11.39
ha nincs js, akkor úgysemkell a gogle js sem :)
3

Mást várok

Jano · 2008. Már. 12. (Sze), 08.28
Jó ötlet, hogy megpróbálod valamilyen ismertebb ui elemmel felhívni a figyelmet arra, hogy a statikus képnek van egy másik módja is, de a lejátszó gomb nem biztos, hogy a legszerencsésebb. Nekem konkrétan az jutott eszembe amikor ránéztem, hogy a play gombra végig fog vezetni valami útvonalon és esetleg közben képeket mutogat adott pontoknál. Tehát nem egy általam irányítható dolog fog történni, hanem én hátradőlhetek és nézhetem a mozit.
4

Lehet, hogy felesleges tényleg

Török Gábor · 2008. Már. 13. (Cs), 15.17
Köszönöm, ez érdekes észrevétel. Lehet, hogy valóban szerencsétlen jelölés erre a funckióra a lejátszás gomb. Peti_ által hivatkozott megoldásban is csak arra apellálnak, hogy felismeri az ember, hogy Google Maps elem, és megszokta, hogy ott lehet mászkálni rajta, tehát kattintani fog.
5

Valami más ikon jó lenne

Jano · 2008. Már. 14. (P), 09.55
Valami más ikon egyébként jó lenne, mint amikor kép sarkába beteszik a nagyítót ha a képre kattintva meg lehet nagyobban nézni.
7

dinamikus betöltés

yaanno · 2008. Már. 26. (Sze), 14.01
Láttam, hogy a jsapit használod a "régi" helyett, és known isuue-ként említed, hogy a maps apit be kell tölteni onloadkor; a jsapi callbackkel lehetővé teszi a dinamikus töltést, tehát nem kell onloadra kötni a maps api betöltését, így megtakarítható a lassulás (is).

Ha minden igaz, a dinamikus loading lehetővé teszi a több térkép együttes használatát összeakadás nélkül.
8

Frissíteni fogom.

Török Gábor · 2008. Már. 26. (Sze), 14.39
Köszönöm, közben már én is belefutottam, úgyhogy hamarosan frissítem is a kódot.
9

szuper

yaanno · 2008. Már. 26. (Sze), 14.53
kíváncsian várom a fejleményeket :)