Linea de Codigo

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:

<script src="http://maps.google.com/maps? file=api&amp;v=2.x&amp;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.

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.

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.

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

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

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

Visualizar el ejemplo | Descargar el código