Etiquetes

,

Dies enrere us parlava de com agrupar punts (markers) d’un mapa de Google Maps. Des de l’aparició de la versió 3 de l’API que permet interactuar amb aquests mapes, a més, hi ha altres característiques interessants: totes les versions admeten SSL (https), per exemple.

Tot això ho he seguit, precisament per un projecte que hem desenvolupat a Sobrevia.net les darreres setmanes. Es tracta, precisament, d’un mapa de Google que mostra informació geolocalitzada; bàsicament, la mostra sobre el punt que ocupa al mapa. El podeu veure al web d’UnnimCasa: cerca per mapa.

Consideracions prèvies

El web d’UnnimCasa està tot allotjat en un servidor segur, de manera que quan vam voler-ho implementar, fa un temps, ens vam trobar amb algun problema: només podíem fer crides a mapes de Google en HTTPS si es passava per caixa; o bé les crides es feien des d’un altre servidor o port, fet que feia perdre un esforç important en mantenir tot el web segur. Així que es va optar per una opció més senzilla: una imatge d’un mapa de Catalunya, per comarques, i enllaços a les diferents comarques al cercador.

Fins que, ja amb la nova versió de la API es va poder publicar un mapa en HTTPS. Malgrat que també hem hagut de realitzar modificacions al propi MarkerClusterer per agrupar els punts, o InfoBubble, per les “bombolles d’ampliació” més personalitzades, hem pogut fer la integració.

Criteris de funcionament

El primer que calia fer era saber què mostrar i com mostrar-ho. Gràcies a mètodes com map.getBounds(), es poden extreure les coordenades superior esquerra i inferior dreta del mapa visible, fet que facilita, i molt, la cerca, en aquest cas, dels immobles. A més, calia sumar-hi les opcions d’un cercador. I, evidentment, mostrar icones en funció del tipus d’immoble que es trobés, tenint també en compte que, a cert nivell de zoom, calia agrupar immobles indicant quants n’hi havia per no fer el mapa innavegable.

Cerca per població? En un mapa?

El primer que vam dubtar era si indicar població en un mapa que pot mostrar tot el món. No tenia gaire sentit buscar els immobles de Caldes de Montbui i restringir els immobles que es mostraven; ja que amb un moviment de ratolí podíem desplaçar-nos fins a Mollet del Vallès, per exemple. I des d’allà a Granollers, i a Vic, i a Ripoll. I no hauria estat lògic haver de fer una nova cerca per cada població disposant d’una eina així.

Per tant, es va optar per especificar, dins dels filtres de cerca, una sèrie de criteris que només servien per centrar el mapa: província, comarca, població i nivell de zoom (en quilòmetres).

I el nivell de zoom com el calculem?

A Google Maps hi ha una sèrie de nivells de zoom, números enters. Podem obtenir, mitjançant un servei, el zoom màxim de la zona que estem veient. I també podem calcular el radi aproximat del zoom ubicant dos marcadors dins d’aquesta visualització (superior-centre i interior-centre, pel radi més petit si el mapa és rectangular “apaisat”) i mesurant-ne la distància. Però… ep! La distància abans es podia calcular amb una funció pròpia de l’API v2 de Google Maps. Ara, en canvi, la v3 no inclou la crida, i cal “buscar-se la vida”. De fet, a l’apunt que vaig comentar ja hi havia un exemple de com hauria de ser una funció pròpia per aquesta tasca.

I l’actualització de dades?

“AJAX”. Com que a cada moviment del mapa podem fer certes accions, a més de rebre’n les coordenades dels límits, es van fer algunes proves per veure quina era la millor opció per advertir a l’usuari del procés d’actualització de dades: si es tapava tota la pantalla com fan alguns webs que utilitzen la mateixa API, s’impedia la correcció d’un moviment erroni. Si es deixava sense avís, de vegades resultava complicat d’entendre quin era el moment en què el mapa havia processat la informació. Així que, “emulant” l’opció que sol utilitzar Google a GMail, per exemple, es va optar per incloure un petit avís a la part central superior del mapa que indica que s’estan carregant les dades, però que no atura la interacció de l’usuari; només es tracta d’informar.

Més criteris: tipus, promocions,…

Evidentment, la cerca per mapa havia d’incloure el màxim d’informació que es pogués en un espai encara més reduït que els resultats del cercador. Per tant, part de la informació es dóna ja sobre el mateix mapa: la icona que apareix és diferent en funció de si un immoble forma part d’una promoció (que a la vegada pot ser de diversos tipus o una promoció de naus industrials, que també té la seva pròpia icona), o si és un immoble sol, on es mostrarà una icona segons el seu tipus (pàrquing, pis, casa…). I en cas de cercar filtrant per tipus, encara que l’immoble formi part d’una promoció, es veurà la icona del tipus d’immoble, per no confondre.

Incorporant-hi funcionalitats

Una de les coses que em va sorprendre és que, finalment, vaig aconseguir, per exemple, integrar una funcionalitat externa del mapa dins del mateix. Es tractava dels immobles favorits: una llista on hi podem afegir, estem registrats o no, aquells immobles que ens interessen (òbviament, si no estem registats, la llista depèn d’una cookie a l’ordinador on ens hem connectat, mentre que estant registrats, es manté mentre ens identifiquem). Doncs això s’havia de poder marcar o desmarcar des del mateix mapa, a la bombolla d’informació de l’immoble. La primera opció, evidentment, era fer una recàrrega de la pàgina; però semblava poc “elegant” de cara a l’usuari, per una funcionalitat més aviat secundària. De manera que calia, per una banda, fer una crida AJAX per desar l’immoble com a favorit, a la vegada que s’actualitzava una part de la pàgina on hi apareix una llista resumida de favorits i, a la vegada, es modificava el botó de la bombolla “afegir a favorits” per “esborrar favorit” o viceversa. Comptat i debatut, no era tant complicat com preveia inicialment, perquè la capa de la bombolla, al final, es comportava tal com si hagués estat fora del mapa. Però això, precisament, feia que el tractament hagués de ser diferent a l’hora d’actualitzar el contingut del mapa a cada moviment.

Versió beta, proves, novetats i optimització

Ara s’obre un procés de prova, amb la paraula beta per la pàgina. En primer lloc, cal veure com funciona amb un número d’immobles important com és el que hi ha al web i amb les visites que hi té -que, tot i haver-ho simulat sobre una altra màquina, el comportament amb un mapa de Google és diferent que el d’una pàgina amb “visites” normals.

Segurament també sorgiran possibles novetats i, evidentment, caldrà estudiar tant l’optimització que s’ha fet inicialment (destriant els camps que calia seleccionar a cada consulta SQL, calculant el pes de cada resposta a les crides AJAX per mostrar la informació al mapa…) com la possibilitat d’optimitzar-ho més si es pot accelerar una mica la forma en què funciona el mapa. Amb un inconvenient, però: al dependre d’un servei extern -encara que sigui de Google-, hi ha una sèrie de factors que no sempre podem controlar. Però, en tot cas, el més important és que funcioni. I que, en el fons, ha estat un repte prou interessant.

Anuncis