Ya hace tiempo que veíamos el ejemplo de cómo mostrar una ventana de información en Google Maps. Pero dicho ejemplo nos daba poco juego ya poniendo texto en la ventana de información no llegamos muy lejos.
Ahora vamos a ver como poner ventanas de información con imágenes. Bueno, con imágenes y con más cosas. La verdad que lo que hacemos es cargar una ventana de información que nos permita cargar HTML. Pero vamos por pasos… lo primero, siempre, crear un área para el mapa y cargar Google Maps.
<title>Ventana de información con imagen</title>
<script src="http://maps.google.com/maps?file=api&v=2.x&key=CLAVE"></script>
<script>
function load(){
if(GBrowserIsCompatible())
var map=new GMap2(document.getElementById("mapa"));}
</script>
<h1>Ventana de información con imagen</h1>
<div id="mapa" style="width: 800px;height: 600px;">
</div>
Los pasos, ya explicados en Cargando Google Maps, se pueden resumir en:
- Cargar el script de Google Maps
- Definir una capa donde irá el mapa
- Cargar el Mapa, vía función onLoad, en la capa
- Indicar la función GUnload en el onunload de la página, para liberar memoria
Cargar la ventana de información que lleve el HTML lo hacemos mediante el método .openInfoWindowHtml(). Este método recibe como parámetros la longitud-latitud, representado por una clase GLatLng, en la cual se abrirá la la ventana y el HTML que queremos cargar.
Así que incluir la imagen será tan sencillo como poner el siguiente código:
map.openInfoWindowHtml(new GLatLng(40.381351,-5.764591),
"<h3>Casa Rural Los Tejos</h3>
<img src="casarural.jpg" style="float:left;margin-right:40px;">
Distribución:
<ul>
<li>1 Habitación de matrimonio</li>
<li>2 habitaciones dobles</li>
<li>2 cuartos de baño completos</li>
<li>1 aseo</li>
<li>Cocina</li>
<li>...</li>
</ul>"
);
Vemos que no solo cargamos la imagen mediante la etiqueta IMG, si no que hemos incluido un titular con H3 y una lista de elementos con UL. El resultado… pues compruébalo tu mismo. :-)
