Abrir una ventana de información en Google Maps

22/Ene/2008 Google , , , , 5 Comentarios

Una de las cosas que podemos hacer sobre los mapas de Google Maps es abrir una ventana de información. Esta nos servirá para dar información adicional sobre el punto localizado.

Para ello el propio objeto GMap2 nos ofrece un método llamado openInfoWindow. Lo primero que tenemos que hacer es cargar el API de Google Maps. Para ello utilizamos el siguiente código JavaScript:

  1. <script src="http://maps.google.com/maps? file=api&v=2.x&key=CLAVE" type="text/javascript"></script>

Tendremos que sustituir la palabra clave por la clave que nos proporcione Google.

Lo siguiente será empezar cargando el mapa. Para ello utilizamos el objeto GMap2. Este objeto necesita el elemento HTML donde se cargará el mapa. Normalmente en una capa.

  1. var map = new GMap2(document.getElementById("mapa"));

El elemento de nuestra página web, la capa, se tiene que llamar "mapa".

Ahora empezamos utilizando el método openInfoWindow. Este método recibe tres parámetros:

  • punto, representa el punto del mapa donde se abrirá la ventana. Este punto lo podemos abrir mediante un punto relativo al mapa GPoint o mediante un punto geográfico GLatLng.
  • nodo, representa el nodo DOM que se abrirá en la ventana de información.
  • opciones, opciones adicionales para la ventana de información

En el caso de crear un objeto GLatLang, los parámetros que se le pasaran será la longitud y latitud.

  1. var punto = new GLatLng(40.381351,-5.764591);

Para el nodo vamos a crear un objeto de texto. En este caso nos apoyamos en el método document.createTextNode, el cual crea un simple elemento de texto.

  1. document.createTextNode("Casa Rural Los Tejos");

El código quedará finalmente de la siguiente forma:

  1. map.openInfoWindow(new GLatLng(40.381351,-5.764591), document.createTextNode("Casa Rural Los Tejos"));

Visualizar el ejemplo | Descargar el código

5 comentarios en “Abrir una ventana de información en Google Maps”

Víctor Cuervo

Ernesto

y como puedo agregar imagenes en vez de texto

Víctor Cuervo

Cecilia

Para los saltos de línea es necesario utilizar :

map.openInfoWindowHtml(map.getCenter(), “Casa Rural los tejos
ciudad = por ahir nroHabitante=5”);

Víctor Cuervo

agerealuri

Very nice!!

Víctor Cuervo

luis

esta bueno tu ejemplo , pero como podria mostrar mensajes con salto de lineas?
por ejemplo
“Casa Rural los tejos
ciudad =por ahi
nroHabitante=5

que me salga el mensaje en ese formato.

¿Algo que nos quieras comentar?

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

*

*