En la actualidad, las páginas o aplicaciones web que se desarrollan cuentan con un componente estético muy importante, estando éste en muchas ocasiones por encima del nivel técnico funcional de las mismas.
De ahí el crecimiento de lo que se conoce como web 2.0, aparición de nuevos lenguajes de programación para aplicar/optimizar estilos en las webs… La aparición del concepto ‘responsive’ o páginas web adaptadas a los diferentes dispositivos móviles actuales.
Como no podía ser de otra forma, el gran magnate internauta no se podía quedar atrás. Google ha ido desarrollando en la última década una API (Application Programming Interface) para que las aplicaciones o webs que usen mapas de google (google maps) puedan customizar o añadir nuevas secciones a estos mapas.
Durante estos últimos meses, en eHidra y dentro del proyecto que tenemos en Inglaterra con Petrol Prices hemos trabajado con esta API para desarrollar una interfaz para los usuarios Plus muy visual y totalmente customizada.
A continuación os dejamos una captura de pantalla de la interfaz citada anteriormente y os vamos explicando en qué hemos estado trabajando. Además, para todos aquellos que aún no sabéis de qué trata Petrol Prices os dejamos aquí un enlace para que conozcáis este proyecto.
Como habéis podido observar, la principal característica de esta página es el gran mapa del que dispone, en el que se puede encontrar distribuida toda la información que se quiere mostrar al usuario. De esta manera, de un simple vistazo o con tan sólo hacer un clic, el usuario tiene acceso a toda esta información.
Como he dicho antes, vamos a ir explicando todos los elementos añadidos.
Elementos básicos
Elementos básicos son el centro de la búsqueda realizada (el círculo rojo con borde blanco) y el círculo azul que delimita el radio de la búsqueda. Estos elementos normalmente se insertan cuando se inicializa el mapa.
También podemos encontrar diferentes paneles en diferentes posiciones del mapa. Actualmente, google te permite añadir elementos en los bordes del mapa atendiendo a la siguiente distribución:
- Arriba a la derecha
- Arriba en el centro
- Arriba en la izquierda
- En el centro a la derecha
- En el centro a la izquierda
- Abajo en la derecha
- Abajo en el centro
- Abajo en la izquierda
Para ello, sólo es necesario crear el elemento y situarlo en una de las anteriores posiciones. Puedes ver un ejemplo aquí.
Elementos de información de usuario
En nuestro caso hemos añadido tres paneles arriba a la derecha para mostrar información de usuario. Además, podemos observar que uno de ellos es un panel de interacción con el usuario que le permite adquirir más búsquedas en el caso de que estén a punto de agotarse.
Decir a su vez, que cada uno de ellos ha sido customizado con detalle, modificando colores, tamaños de fuentes…
Estos paneles son mostrados en función del estado en cada momento de los usuarios. Raramente se muestran todos a la vez.
Elementos de selección
En la parte inferior derecha hemos situado un filtro que permite a los usuarios seleccionar qué elementos quieren ver en cada momento.
Tantos estos elementos como los anteriores son elementos fijos que siempre guardan la misma posición dentro del mapa.
Elementos interactivos
El resto de elementos que se pueden ver en el mapa son marcadores (markers) y ventanas de información (infowindows) y son elementos interactivos porque están situados en el mapa mediante el establecimiento de una latitud y una longitud. Por lo cual, si el mapa se mueve o se hace zoom, ellos mantienen una posición relativa al marco del mapa.
En Petrol Prices hemos customizado al máximo los marcadores, no sólo añadiendo un icono correspondiente a cada marca de estaciones de servicio, sino añadiendo una etiqueta debajo del mismo con el precio y añadiendo además un borde, todo ello en negro. Se puede decir que hemos convertido el tradicional y básico marcador rojo de google en un marcador muy atractivo visualmente, totalmente personalizado.
En las ventanas de información no solo hemos añadido datos correspondientes a cada estación de servicio, sino además un botón de interacción para que el usuario obtenga aún una información más detallada de la localización de cada estación de servicio.
Elementos de ruta
La nueva página de búsqueda de precios que hemos desarrollado tiene además un planificador de rutas, en el que se puede ver cómo hemos incorporado al mapa una ruta, desde un origen hasta un destino siendo esta a su vez totalmente customizada.
Os mostramos a continuación una captura de pantalla como ejemplo.
En definitiva, la API de google ofrece grandes posibilidades visuales a la hora de desarrollar proyectos en los que la utilización de un mapa de google para mostrar información es útil.
Ya puestos, en eHidra también estamos aplicando todo lo explicado en este post en otro proyecto: Lleno Por favor, que se puede definir como la versión española de Petrol Prices.
