Google Maps es la aplicación web por excelencia, una muestra de ello es que se trata de la más usada para crear mashups. Uno de ellos es Google Maps Lightbox, una versión del famoso Lightbox en el que mostramos Google Maps, con el fin de evitar que el usuario tenga que abandonar nuestra página para ver uno de sus mapas, sin necesidad de integrar Google Maps en nuestra aplicación.
El script ha sido probado sobre Internet Explorer 7 y Firefox 2.0.
Instalación
- Descargamos el zip
- Descomprimimos el fichero y lo subimos a nuestro servidor
- Obtenemos una Google Maps Key
- Insertamos el código que Google nos facilita en nuestro template (generalmente en el fichero header.php)
- Incluimos el script que nos creará los efectos a nuestro template (siendo
%urlbase%la url de donde se encuentra el script)
<script src="http://%urlbase%/gmlightbox/gmlightbox.js" type="text/javascript"></script>- Incluimos la hoja de estilos a nuestro template
<link href="http://%urlbase%/gmlightbox/gmlightbox.css" rel="stylesheet"/>Modo de uso
Para usarlo simplemente tendremos que crear un enlace hacia el mapa que queremos mostrar, dotandolo del atributo rel con «gmap» como valor.
<a href="AQUI EL ENLACE" rel="gmap" title="Title">Hellow</a>Integración con WordPress
La integración con WordPress es realmente sencilla y muy similar a la anterior. Por el momento no hay ningún plugin que lo integre, pero no tengo mucho tiempo para desarrollarlo, así que si alguien se anima 😀
Pasos a seguir
- Descargamos el zip
- Descomprimimos el fichero y lo subimos a la raiz de nuestro WordPress
- Obtenemos una Google Maps Key
- Editamos o creamos sinó existe el fichero
functions.phpen la carpeta de nuestro template. - Añadimos el siguiente código en el fichero
functions.phpe introducimos la Google Maps key en la variable que vemos abajo.
<?php
$key ='INSERTAMOS NUESTRA GOOGLE MAPS KEY';
function insertgMapCode() {
global $key;
return '<script src="http://maps.google.com/maps?file=api&v=2&key='.$key.'"
type="text/javascript"></script>';
}
function insertScripts(){
$home = get_option("wpurl");
echo insertgMapsCode();
echo '<script src="http://'.$home.'/gmlightbox/gmlightbox.js" type="text/javascript"></script>';
echo '<link href="http://'.$home.'/gmlightbox/gmlightbox.css" rel="stylesheet"/>';
}
add_action('wp_head', 'insertScripts');
?>No lo he podido probar, si alguien se anima a crear un plugin para WordPress, que me pase el enlace y actualizaré el post.
12 comentarios, 3 referencias
+
#