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

23/Sep/2009 Google , , , , , , , , , , 1 Comentario

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.

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

Un comentario en “Ventanas de información con imágenes en Google Maps”

Víctor Cuervo

Xavi

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

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*