feed twitter facebook LinkedIn facebook

Google » Ventanas de información con imágenes en Google Maps

Septiembre 23, 2009 por Víctor Cuervo . 5760 visitas 1 Comentario Imprimir Imprimir

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.

  3. <title>Ventana de información con imagen</title>
  4. <script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=CLAVE" type="text/javascript"></script>
  5.  
  6. <script type="text/javascript">
  7.  
  8. //<![CDATA[
  9.  
  10. function load(){
  11.   if (GBrowserIsCompatible()) 
  12.      var map = new GMap2(document.getElementById("mapa"));    
  13.  }
  14. //]]>
  16. </head>
  17. <body onload="load();" onunload="GUnload();">
  18. <h1>Ventana de información con imagen</h1>
  19. <div id="mapa" style="width: 800px;height: 600px;">
  20. </div>
  21.  
  22. </body>
  23. </html>

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:

  1. map.openInfoWindowHtml(new GLatLng(40.381351,-5.764591),"
  2. <h3>Casa Rural Los Tejos</h1>
  3.  
  4. <img src='casarural.jpg' style='float:left;margin-right:40px;'> Distribución:
  5. <ul>
  6. <li>1 Habitación de matrimonio</li>
  7. <li>2 habitaciones dobles</li>
  8. <li>2 cuartos de baño completos</li>
  9. <li>1 aseo</li>
  10. <li>Cocina</li>
  11. <li>...</li>
  12. </ul>
  13.  
  14. ");

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. :-)

Visualizar el Codigo
Visualiza el artículo		Descargar el Codigo
Descargar el código		Error en el Codigo
Error en el código		Foro sobre Google Maps
Foro sobre Google Maps
tags: , , , , , , , , , ,

Artículos relacionados:

1 comentario »

Redifusión RSS de los comentarios de la entrada. TrackBack URI

  1. Xavi
    Agosto 11, 2010 #

    Hola,

    Por fin he encontrado lo mismo que me pasa a mi y en el ejemplo que pones NO es correcto, porque el globo no engloba todo el contenido (imagen + texto). Si te fijas, hay texto que no tiene globo blanco por debajo. Eso es porque el globo solo detecta el texto, la imagen aunque la cargue no se entera… llevo dias buscando solucion y pensé encontrarla aquí pero veo que tienes el mismo problema y nadie se ha fijado??

    A ver si alguien responde..

    Gracias

Deje un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Imagen CAPTCHA
*