Estoy haciendo algunas pruebas para un proyecto personal y como resultado de estas he creado este sencillo plugin de jquery destinado a hacer un pequeño efecto en los mapas estáticos de Google Maps cuando pasamos el ratón por encima.
Lo que hacemos es definir dos tipos de mapa entre los 5 que nos da Google Maps. Uno será el tipo de mapa que se vea por defecto al cargar la página, el otro sólo será visible cuando el usuario pase el ratón por encima del mapa. El mismo proceso se sigue con el zoom, pudiendo especificar 2 zooms distintos uno para el estado en reposo, y otro para la cuando pasemos el ratón por encima.
Podéis ver un ejemplo del resultado al pasar el ratón por el siguiente mapa:
Como usar el plugin
Lo primero, como en cualquier plugin de jquery, es cargar la librería jquery y luego el archivo que contiene la definición javascript del plugin. El archivo puedes encontrarlo en el siguiente link:
Además deberemos usar el plugin sobre la imágen del mapa estático, o bien sobre el div contenedor de todos los mapas estáticos a alterar con este efecto.
Ejemplo 1: Usándolo sobre todos los mapas de un div contenedor.
$(document).ready(function(){
// indicamos que debe hacer el efecto sobre todos los mapas dentro del div maps
$("div#maps").hoverGoogleStaticMap();
});
Ejemplo 2: Usándolo directamente sobre una imágen.
$(document).ready(function(){
// también debe hacer el efecto sobre la imagen con id "map"
$("img#map").hoverGoogleStaticMap();
});
Con cualquiera de estos 2 métodos el plugin quedará funcionando en nuestra web.
Como definir el mapa y el zoom alternativos
La api de mapas estáticos de google es bastante sencilla. Sólo necesitamos incluir una imagen con la etiqueta «img» en nuestra página e indicar por variables en el «src» de la misma los distintos aspectos que conformarán el mapa: posicion, marcadores, centro, tipo de mapa, etc…
Para este plugin he preferido respetar esta sencillez e incluir los datos de la vista del mapa a visualizar al pasar el ratón por encima entre las variables que indicamos en la imágen. La api de Google solo recoge las variables que necesita, si le pasamos variables extra, printa el mapa igualemnte sin problemas.
Las variables que definen el tipo de mapa y el zoom en el mapa son «maptype» y «zoom» respectivamente. Para usar este plugin solo deberemos definir de nuevo estas variables pero con una H (de «hover») deltante. Así para definir un mapa de tipo normal y con zoom 13 que al pasar por encima debe cambiar a satelite con zoom 9 indicaremos la siguiente serie de variables:
...&maptype=roadmap&Hmaptype=satellite&zoom=13&Hzoom=9...
Con eso bastará para que el plugin funcione. El plugin solo contempla cambiar estas dos variables pero para cualquiera que haya trabajado un poco con jquery y javacript no debería ser dificil hacer que cambiase en el hover cualquier otra variable de su invención.
Puedes cargar y ver el código fuente de la página de demos para ver más ejemplos de uso del plugin: