Hasta ahora siempre hemos usado el Lightbox para tratar imágenes. Aquí os dejo una adaptación para realizar un lightbox de un mapa de Google. Es muy útil cuando no queremos poner el mapa en un tamaño muy grande por falta de espacio o simplemente por estética.

Podéis descargaros los archivos necesarios haciendo click aquí

Es muy sencillo, vamos a especificar los pasos.

1. Descargamos el archivo y descomprimimos su contenido
2. Guardamos en la carpeta de la web las imágenes, el css y el script.
3. Enlazamos el css y el script dentro de la página:
   <link href=”gmlightbox.css” rel=”stylesheet” type=”text/css” />
   <script src=”gmlightbox.js” type=”text/javascript”></script>
4. Tenemos que ir a la web de Google Maps y buscar la dirección que queremos.
5. En el “href” del enlace desde donde queremos ampliar el mapa colocamos la que nos da Google para enlazar un mapa en una web.
   

Al enlace le podemos poner un atributo “title” para mostrar el título que le queremos dar al mapa. Al final el enlace nos tendría que quedar de la siguiente manera:
<a href=”URL_GOOGLE” rel=”gmap” title=”Mapa de ejemplo”>Mostrar mapa</a>

Podéis ver un ejemplo haciendo click aquí.

¡Espero que os sirva de ayuda!

Usaremos estas normas para que nuestro código sea más legible

Tabs o Espacios
En el contenido dentro de corchetes, siempre se identará este contenido con tabs.

Cabecera del archivo

Es recomendable que todos los archivos .php inicien con una cabecera específica que indique información de la versión, autor de los últimos cambios, etc.

//-----------------------------------------------------------------------------------
// Funciones Genéricas de manejo PHP
// Escrito por fulanitin el día asdfasdfasd

(más…)

Normas para llevar un trabajo ordenado y mejorar nuestra productividad

Organización de los archivos

Para mejorar los cambios de diseño y forma sin afectar otras áreas, dividimos en varias básicas todos nuestros estilos.

• formato_de_plantilla.css: Todo lo relacionado con posicionamiento, plantilla del diseño, etc. Exclusivamente.
• archivo.css: Todo lo relacionado con un archivo en particular
• funcionalidad.css. Todo lo relacionado con funcionalidades detalladas (galerías de fotos, ajax…)

(más…)