Shadowbox con Google Maps
Para mostar mapas de Google Maps dentro de nuestras páginas web, podemos utilizar Shadowbox.
Para ello, antes de nada, debemos descargar las librerías de Shadowbox; también sería conveniente que echarais un vistazo al artículo Shadowbox, donde detallamos algunas funciones muy útiles de manejo de shadowbox y propiedades.
De igual forma echar un vistazo a Google Maps donde detallamos como detallar la localización y descripción del sitio que deseamos mostrar, como su integración dentro de la página web.
Una vez que hemos repasado esto, incluimos la siguiente función JavaScript que lanza la llamada al objeto Shadowbox mendiante la función Shadowbox.open(), que a su vez carga el objeto Google Maps:
function GoogleMaps(latitud,longitud,texto)
{
Shadowbox.open({
player: ′html′,
content: ′′,
height: 300, //alto de la ventana del Shadowbox
width: 500, //ancho de la ventana del Shadowbox
options: {
overlayColor: "#644224", //el color para la seccion inactiva de la pantalla del Shadowbox
onFinish: function(item){
if(GBrowserIsCompatible()){
var body = document.getElementById(Shadowbox.contentId());
var map = new GMap2(body);
//centramos el mapa en la posición señalada
map.setCenter(new GLatLng(latitud,longitud), 16);
//mostramos en bocadillo del mapa con el texto pasado como parámetro
map.openInfoWindowHtml(new GLatLng(latitud,longitud),""+texto+"");
// añadimos algunos controles de Google Maps para la visualización
map.addControl(new GSmallMapControl());
map.addControl(new GOverviewMapControl());
map.addControl(new GMapTypeControl());
}
}
}
});
}Una vez incluida la función del llamada al Shadowbox, insertamos la función JavaScript que la realiza dentro de un enlace en la página web:
<a class="option" onclick="GoogleMaps( 41.641265,-4.730043,′Texto descriptivo′);" href="#" mce_href="#">Ver mapa</a>
En la llamada a la función que lanza el Shadowbox pasamos como parámetros las coordenadas de localización del punto, como el texto descriptivo.
Comentarios Total 3 comentarios
MP-WEB - Muy útil el Shadowbox
Publicado: 18/03/2010 18:14:33
Gracias, he matado 2 pájaros de un tiro con el artículo
Marco - Excelente
Publicado: 01/06/2010 22:34:38
Muy bien gracias
Erick -
Publicado: 21/06/2010 16:13:11
Excelente comentario!!!
