Te hemos preparado varios ejemplos en esta página.

Ejemplo 1 – Opacidad imagen

En este efecto puedes ver la transición de dos imágenes. Para ello, necesitamos dos imágenes superpuestas. Una encima de la otra. Al pasar por encima variamos la opacidad de la que queda por encima y así vemos la imagen de abajo.

El código HTML del ejemplo:

<div style=”height: 320px;” >
<div style=”position: relative; margin: 20px;”>
<div style=”width: 400px; height: 300px; position:absolute; top:0; left: 0;”>
<img src=”paisaje.jpg” width=”400″ height=”300″/>
</div>
<div style=”width: 400px; height: 300px; position:absolute; top:0; left: 0;”>
<img src=”paisaje_bn.jpg” width=”400″ height=”300″/>
</div>
</div>

El código js:

<script type=”text/javascript”>
$(“.img_bn”).bind( “mouseenter”, function(e)
{
$(this).stop();
$(this).animate({ opacity: 0.0 }, 500 );
});
$(“.img_bn”).bind( “mouseleave”, function(e)
{
$(this).stop();
$(this).animate({ opacity: 1 }, 500 );
});
</script>

Como puedes ver asociamos los eventos mouseenter y mouseleave a dos funciones que varían la opacidad de la imagen a 0 o 1. Para ello llamamos a la función animate pasando los cambios que queramos aplicar al CSS y el tiempo en milisegundos que ha de tardar el efecto.

La función stop() sirve para parar todos los efectos que están en marcha sobre uno o varios objetos.

Ejemplo 2 – Tamaño de imagen

En este ejemplo aplicamos un cambio de tamaño a la imagen. Para ello el código js es:

<script type=”text/javascript”>
$(“#ej_img”).bind( “mouseenter”, function(e)
{
$(this).stop();
$(this).animate({ height: 300, width: 400 }, 500 );
});
$(“#ej_img”).bind( “mouseleave”, function(e)
{
$(this).stop();
$(this).animate({ height: 150, width: 200 }, 500 );
});
</script>

Ejemplo 3 – Tamaño de texto

Aquí puedes ver como variamos el tamaño de la fuente del texto. El código js es:

<script type=”text/javascript”>
$(“#ej3_p”).bind( “mouseenter”, function(e)
{
$(this).stop();
$(this).animate({ fontSize: 20 }, 500 );
});
$(“#ej3_p”).bind( “mouseleave”, function(e)
{
$(this).stop();
$(this).animate({ fontSize: 10 }, 500 );
});
</script>

Ejemplo 4 – Varios efectos en uno

Podemos hacer que se ejecuten varios efectos. Uno después del otro. Para ello solo iremos concatenando los efectos. En el ejemplo el código js es:

<script type=”text/javascript”>
$(“#ej4_div”).bind( “click”, function(e)
{
$(this).animate({ left: 150 }, 500 )
.animate({ top:50, left:200 }, 250 )
.animate({ top:0, left: 250 }, 1500 )
.animate({ left: 400 }, 500 )
.animate({ top: 400 }, 500 )
.animate({ left: 200 }, 500 )
.animate({ top: 0, left: 0 }, 500 );
});
</script>

Hay varias formas de asignar una función a un evento. Nosotros usaremos al método bind de Jquery. Este evento recibe ( obligatoriamente ) dos parametros.

bind( evento, funcion )

Los posibles eventos son: blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick,  mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select,  submit, keydown, keypress, keyup, error.

Os hemos preparado cuatro ejemplos para que comprobéis la sencillez de su uso. Podéis verlos en acción en este enlace. Cualquier duda que os surja no dudéis en comentarla.

Ejemplo 1 – Click \ Dblclick

En este ejemplo enlazamos los eventos click y doble click a un div. Cuando se lanza el evento llamamos a una función que cambia el texto que hay dentro del segundo div.

HTML:

<div style=”position: relative; height: 100px; margin: 20px;”>
<div id=”div_ejemplo1″ style=”width: 100px; height: 100px; background:#FF0000; position:absolute; top:0; left: 0;”></div>
<div id=”div_ejemplo1_texto” style=”padding: 10px; height: 80px; position:absolute; top:0; left: 110px; “>Haz click o doble click en el cuadrado</div>
</div>

Javascript:

<script type=”text/javascript”>
$(“#div_ejemplo1″).bind( “click”, function(e)
{
var str = “Has echo click en el cuadrado en el punto (” + e.pageX + “,” + e.pageY + “)”;
$(“#div_ejemplo1_texto”).text( str );
});
$(“#div_ejemplo1″).bind( “dblclick”, function(e)
{
var str = “Has echo doble click en el cuadrado en el punto (” + e.pageX + “,” + e.pageY + “)”;
$(“#div_ejemplo1_texto”).text( str );
});
</script>

Ejemplo 2 – Mouseenter \ Mouseleave

En este ejemplo puedes ver como cambiamos la clase del primer div al entrar y salir en el div.

HTML:

<div style=”position: relative; height: 100px; margin: 20px;”>
<div id=”div_ejemplo2″ style=”width: 100px; height: 100px; position:absolute; top:0; left: 0;”></div>
<div id=”div_ejemplo2_texto” style=”padding: 10px; height: 80px; position:absolute; top:0; left: 110px; “>Pasa por encima del cuadrado</div>
</div>

CSS:

<style>
#div_ejemplo2 { background: #FF0000; }
#div_ejemplo2.over { background: #00FF00; }
</style>

Javascript:

<script type=”text/javascript”>
$(“#div_ejemplo2″).bind( “mouseenter mouseleave”, function(e)
{
$(“#div_ejemplo2″).toggleClass(“over”);
});
</script>

Ejemplo 3 – Añadir \ Eliminar eventos

Igual que enlazamos eventos con el método bind, también puedes eliminar este enlace. Para ello llamaremos al método unbind. En este ejemplo:

$(“#div_ejemplo3″).unbind( “mouseenter” );

Ejemplo 4 – Alternar funciones en Click

La verdad es que no le veo la utilidad a esta función. Con ella puedes ejecutar varias funciones con el evento click de un objeto. Las funciones no se ejecutan a la vez, sino que van alternándose. Una cada vez. Para ello llamaremos a la función toggle. En el ejemplo lo utilizamos para ir cambiando el color de fondo del div. El código js es:

<script type=”text/javascript”>
$(“#div_ejemplo4″).toggle(
function() { $(“#div_ejemplo4″).css({“background”:”#099000″ })},
function() { $(“#div_ejemplo4″).css({“background”:”#00FF00″ })},
function() { $(“#div_ejemplo4″).css({“background”:”#000990″ })},
function() { $(“#div_ejemplo4″).css({“background”:”#0000FF” })},
function() { $(“#div_ejemplo4″).css({“background”:”#900009″ })},
function() { $(“#div_ejemplo4″).css({“background”:”#FF0000″ })}
);
</script>

En este caso, te vamos a mostrar varios de ellos que están incluidos en Jquery User Interface. Para poder usar estos widgets en tus webs puedes descargarte la librería en este enlace. Deberas incluir los scripts en tus páginas añadiendo a tu cabecera HTML:

<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript” src=”jquery-ui-1.7.2.custom.min.js”></script>
<link type=”text/css” href=”css/smoothness/jquery-ui-1.7.2.custom.css” rel=”stylesheet” />

Puedes ver los ejemplos en este enlace.

Ejemplo 1 – Acordeón

Este widget te permite poner varios divs que se muestran y esconden haciendo un efecto de acordeón. Para crear este widget necesitas una parte del código en HTML

<div id=”div_acordeon”>
<h3><a href=”#”>Contenido 1</a></h3>
<div>
<p>Aquí puedes poner el contenido de la primera division.</p>
</div>
<h3><a href=”#”>Contenido 2</a></h3>
<div>
<p>Aquí puedes poner el contenido de la segunda division.</p>
</div>
<h3><a href=”#”>Contenido 3</a></h3>
<div>
<p>Aquí puedes poner el contenido de la tercera division.</p>
Campo 1: <input type=”text” name=”texto” /><br/>
Campo 2: <input type=”password” name=”pass” />
</div>
</div>

La otra parte del código es javascript:

$(document).ready(function(){ $(“#div_acordeon”).accordion(); });

Con esta linea de js definimos que el div con identificador div_acordeon es el que contiene todos los títulos y los divs que se mostrarán y esconderán.

Ejemplo 2 – Calendario

Puedes añadir un calendario facilmente con este widget. Hay dos opciones. Definir el calendario sobre un div, siempre sera visible, o definirlo sobre un campo de texto, el calendario se mostrara cuando entren en el campo.

Para ello tenemos los codigos HTML:

<div id=”div_calendario”></div>
Campo de fecha: <input id=”text_calendario” type=”text”></p>

El código js para crear el calendario es:

$(document).ready(function(){ $(“#div_calendario”).datepicker({ dateFormat: ‘dd/mm/yy’ }); });
$(document).ready(function(){ $(“#text_calendario”).datepicker({ dateFormat: ‘dd/mm/yy’ }); });

Ejemplo 3 – Diálogo

Para los diálogos modales deberemos crear un div para cada uno de ellos con el contenido de estos. En el ejemplo hemos creado estos tres

<div id=”dialogo” title=”Titulo del diálogo modal”>
<p>Aquí puedes escribir el texto que desees</p>
</div>

<div id=”confirmacion” title=”Titulo de la confirmación modal”>
<p><span style=”float:left; margin:0 7px 20px 0;”></span>Texto de confirmación. Esta seguro?</p>
</div>

<div id=”formulario” title=”Titulo del formulario”>
<form>
<fieldset>
<label for=”name”>Nombre</label><br/>
<input type=”text” name=”name” id=”name” /><br/>
<label for=”email”>Correo</label><br/>
<input type=”text” name=”email” id=”email” value=”" /><br/>
<label for=”password”>Contraseña</label><br/>
<input type=”password” name=”password” id=”password” value=”" />
</fieldset>
</form>
</div>

El código js es:

$(function() {
$(“#dialogo”).dialog({ bgiframe: true, modal: true, autoOpen: false });
});

$(function() {
$(“#confirmacion”).dialog({ bgiframe: true, modal: true, autoOpen: false,
overlay: { backgroundColor: ‘#000′, opacity: 0.5 },
buttons: { ‘Aceptar’: function() { $(this).dialog(‘close’); },
‘Cancelar’: function() { $(this).dialog(‘close’); }
} }); });

$(“#formulario”).dialog({ bgiframe: true, autoOpen: false, height: 300, modal: true, resizable: false,
buttons: { ‘Aceptar’: function() { $(this).dialog(‘close’); },
‘Cancelar’: function() { $(this).dialog(‘close’); }
}, });

Para abrir un diálogo utilizamos el código js siguiente

$(“#dialogo”).dialog(‘open’);

Ejemplo 4 – Pestañas

El código HTML es:

<div id=”div_tabs”>
<ul>
<li><a href=”#tab1″>Pestaña 1</a></li>
<li><a href=”#tab2″>Pestaña 2</a></li>
<li><a href=”#tab3″>Pestaña 3</a></li>
</ul>
<div id=”tab1″>
<p>Aquí puedes poner el contenido de la primera pestaña.</p>
</div>
<div id=”tab2″>
<p>Aquí puedes poner el contenido de la segunda pestaña.</p>
</div>
<div id=”tab3″>
<p>Aquí puedes poner el contenido de la tercera pestaña.</p>
</div>
</div>

Y el js:

$(function() { $(“#div_tabs”).tabs(); });

Ejemplo 5 – Cambiar los themes, CSS

Puedes cambiar el estilo de los widgets modificando el fichero CSS. Otra forma más fácil de crear tu propio tema es utilizando la herramienta ThemeRoller que Jquery pone a tu disposición. Puedes modificar el estilo en linea y cuando sea de tu agrado descargarte el fichero CSS que lo define.

Puedes probar esta herramienta en este ejemplo y modificar el estilo de todos los ejemplos.

Como siempre, puedes ver los ejemplos en funcionamiento en una página a parte. Pulsa este enlace si quieres verlos.

Ejemplo 1 – Mostrar / Ocultar

En este ejemplo puedes ver como se muestran y ocultan unos divs. El efecto hace que se oculten y muestren por el borde superior izquierdo. Para ello estamos utilizando el código:

• $(‘.div_ejemplo1′).show(“5″): Muestra todos los objetos de la clase div_ejemplo1.
• $(‘.div_ejemplo1′).hide(“5″): Oculta todos los objetos de la clase div_ejemplo1.
• $(‘.div_ejemplo1′).toggle(“5″): Muestra o oculta, alternando según el estado en el que se encuentren, todos los objetos de la clase div_ejemplo1.

Como ves, utilizamos los selectores que os explicamos en el post Jquery, escribe menos, haz más. Por lo tanto los efectos se pueden aplicar sobre un solo objeto, sobre varios, todos los de la misma clase…

Ejemplo 2 – Deslizar

Este ejemplo es similar al anterior pero el efecto muestra y oculta los divs deslizandolos a la parte superior. Utilizamos el código:

• $(‘.div_ejemplo2′).slideDown(): Muestra todos los objetos de la clase div_ejemplo2.
• $(‘.div_ejemplo2′).slideUp(): Oculta todos los objetos de la clase div_ejemplo2.
• $(‘.div_ejemplo2′).slideToggle(): Muestra o oculta, alternando según el estado en el que se encuentren, todos los objetos de la clase div_ejemplo1.

Ejemplo 3 – Opacidad

Este ejemplo utiliza la opacidad de los divs para crear el efecto. El código:

• $(‘.div_ejemplo3′).fadeIn(): Muestra todos los objetos de la clase div_ejemplo3.
• $(‘.div_ejemplo3′).fadeOut(): Oculta todos los objetos de la clase div_ejemplo3.

Ejemplo 4

En este ejemplo puedes ver como los efectos no solo funcionan sobre divs. Aquí los utilizamos con un párrafo y con un enlace.

Podéis ver el ejemplo en este enlace.

Movernos a un punto

Para movernos a un punto podemos hacerlo con las sentencias:

var la = ge.createLookAt(”);
la.set(XXXX, YYYYY, 0, ge.ALTITUDE_RELATIVE_TO_GROUND, 0, 0, 1000 );
ge.getView().setAbstractView(la);

Deberemos substituir XXXX e YYYY por las coordenadas del punto.

Crear un punto de interés

Crear un punto de interés es algo mas largo. Aquí os dejo el código comentado.

//Creamos el punto
var placemark = ge.createPlacemark(”);
//Asignamos el texto o nombre del punto
placemark.setName(“Sagrada Família”);
//Lo añadimos al visor
ge.getFeatures().appendChild(placemark);
//Le asignamos el icono
var icon = ge.createIcon(”);
icon.setHref(‘http://maps.google.com/mapfiles/kml/paddle/red-circle.png’);
var style = ge.createStyle(”);
style.getIconStyle().setIcon(icon);
placemark.setStyleSelector(style);
//Situamos el punto fisicamente
var la = ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_GROUND);
var point = ge.createPoint(”);
point.setLongitude(2.1745);
point.setLatitude(41.404);
placemark.setGeometry(point);

Opciones del visor

Podemos modificar varias opciones en el visor:

• options.setStatusBarVisibility( TRUE/FALSE ): Barra de estado.
• options.setGridVisibility( TRUE/FALSE ): Visibilidad del grid.
• options.setOverviewMapVisibility( TRUE/FALSE ): Visibilidad del mapa de situación.
• options.setScaleLegendVisibility( TRUE/FALSE ): Visibilidad de la escala.
• options.setAtmosphereVisibility( TRUE/FALSE ): Visibilidad de la atmósfera.
• options.setMouseNavigationEnabled( TRUE/FALSE ): Navegación con el ratón.
• ge.getNavigationControl().setVisibility( ge.VISIBILITY_SHOW / ge.VISIBILITY_HIDE ): Visibilidad del control de navegación.

Para empezar necesitaremos la clave del API, podéis conseguirla en este enlace.

Puedes ver un ejemplo en la página.

El API de Google Earth

Para cargar el API deberemos incluir el script en nuestra cabecera HTML con

<script type=”text/javascript” src=”http://www.google.com/jsapi?key=CLAVE_API”></script>

Necesitaremos crear un div donde se mostrara el mundo. Para ello, en nuestro ejemplo creamos el div:

<div id=”div_earth” style=”margin: 10px; width: 600px; height: 400px”></div>

Dentro de nuestro código javascript cargamos el mundo en el div y lo inicializamos. Para ello:

<script type=”text/javascript”>
google.load(“earth”, “1″);
var ge = null;
function init() {
google.earth.createInstance(“div_earth”, initCallback, failureCallback);
}
function initCallback(pluginInstance) {
ge = pluginInstance;
ge.getWindow().setVisibility(true);
ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);
}
</script>

Este  código es bastante genérico así que poca cosa hay que explicar.

• google.earth.createInstance(“div_earth”, initCallback, failureCallback): Esta linea crea la instancia de Google Earth. El primer parametro, “div_earth”, es el div donde veremos la aplicación. El segundo sera la función javascript que se llamara para la inicialización. El tercero sera la función que se llamara si hay algún error.
• ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO): Mostramos los controles de navegación con los que el usuario se podrá mover, hacer zoom…

Uso de KML con el API

Mi idea era empezar por tutoriales básicos pero, por petición de uno de nuestros lectores, voy a explicar como utilizar ficheros KML en el API. Solo explicare como utilizarlos con el API, en siguientes post entraremos en los ficheros KML para ver como crearlos. Si quereis ver el fichero KML que usaremos podeis acceder desde este enlace.

Según la definición de la Wikipedia, “KML (del acrónimo en inglés Keyhole Markup Language) es un lenguaje de marcado basado en XML para representar datos geográficos en tres dimensiones. Fue desarrollado para ser manejado con Keyhole LT, precursor de Google Earth (Google adquirió Keyhole LT en Octubre de 2004 tras lanzar su versión LT 2)”.

KML es usado para definir objetos en 3D, textos, puntos de interés… en mapas y vistas en 3D. En el ejemplo que os mostraré dibujaremos las instalaciones del Google Campus. Podéis ver el resultado en la imagen.

Para cargar el fichero KML utilizaramos la función procesarKML.

function procesarKML()
{
var kmlUrl = ‘http://vidaenlaluna.es/ejemplos/api_google_kml/google_campus.kml’;
google.earth.fetchKml(ge, kmlUrl, function(kmlObject) {
if (kmlObject)
{
ge.getFeatures().appendChild(kmlObject);
document.getElementById(‘btnKML’).disabled = true;
alert(‘Fichero KML.correcto’);
}
else
{
alert(‘Fichero KML.incorrecto’);
}
});
}

Google.earth.fetchKml es el método del API encargado de procesar el fichero. Para ello le debemos pasar la instancia del plugin( anteriormente hemos creado la instancia en la variable ge ) y la URL del fichero KML. En el tercer parámetro enviamos la función que se ejecutara después de procesar el fichero. Esta función carga el objeto KML en el mapa si se ha procesado correctamente o alerta al usuario de que el fichero KML no es correcto.

Cualquier duda ya sabéis que podéis comentarla.

Estas librerías te ayudan a acceder a los objetos que forman tu pagina web, controlar los eventos, crear animaciones, ajax…

Puedes descargarte la ultima versión de la librería en la página oficial de Jquery. Una vez la tengas debes incluirla en el código HTML de tu página. Para ello, ya sabes que debes incluir en la cabecera el siguiente código:

<script type=”text/javascript” src=’jquery.js’></script>

Ahora ya estas listo para empezar.

Selectores de objetos

Si no utilizas ninguna librería, puedes seleccionar un objeto del DOM utilizando alguna de las sentencia:

• document.getElementById( ‘Identificador’ )
• document.getElementByName( ‘nombre )
• document.getElementByTagName( ‘nombre )

Con Jquery seleccionamos los objetos utilizando $(”). Puedes seleccionar utilizando:

• $( ‘#div_cabecera’ ): Esta sentencia nos devuelve el conjunto de objetos con identificador div_cabecera.
• $( ‘div’ ): Nos devuelve el conjunto de objetos del tipo div.
• $( ‘.div_cabecera’ ): Nos devuelve el conjunto de objetos de la clase div_cabecera. Podemos escribir varias clases a la vez, $( ‘.clas1.clas2′ ), y nos devolverá el conjunto de objetos que tienen ambas clases.
• $( ‘*‘ ): Nos devuelve el conjunto de todos los objetos.

Podemos utilizar varios selectores separados por comas en la misma sentencia. Podemos escribir $( ‘#cabecera, div’ ) para trabajar con todos los objetos con identificador cabecera mas todos los divs.

Puedes ver mas sobre los selectores en la documentación de Jquery

Seguiré hablando de Jquery en los siguientes Post.

Puedes ver los ejemplos en la pagina.

Ejemplo 3 – Tipos de mapas

En Google maps tenemos varias vistas diferentes de los mapas. Las mas comunes son

• Vista predeterminada: Es la vista clásica de los mapas de Google. El código es G_NORMAL_MAP.
• Vista satélite: Es la vista desde satélite. El código es G_SATELLITE_MAP.
• Vista híbrida: Es una mezcla de la vista satélite con calles y nombres. El código es G_HYBRID_MAP.
• Vista terreno: Es una mezcla de las tres vistas anteriores. Puedes ver el terreno en relieve pero continuas teniendo información de calles y situaciones importantes. El código es G_PHYSICAL_MAP.

Para cambiar de una vista a otra deberás llamar al método setMapType pasandole el código del tipo de mapa que quieres ver.

map.setMapType(G_NORMAL_MAP);

Ejemplo 4 – Zoom y mover el mapa

Hacer zoom y mover el mapa es muy sencillo.

Para hacer zoom tendrás que llamar a los métodos zoomIn o zoomOut segun quieras acercarte o alejarte.

map.zoomIn();
map.zoomOut();

Para mover el mapa a otro punto simplemente llama a panTo pasando por parámetro el punto donde quieres situarte.

map.panTo( new GLatLng(41.405317,2.176829) );

Sin usar el API

Es la forma mas sencilla de incluir un mapa. Sigue estos pasos:

• Buscar la dirección en la pagina de Google Maps. En nuestro ejemplo buscamos la Sagrada Familia.
• Pulsa sobre el texto “Enlazar”

• Copia y pega el código que hay debajo de “Pegar HTML para insertar en sitio web” en tu pagina web.

Con estos tres pasos ya tienes un mapa en tu pagina web.

Usando el API

Si por ejemplo quieres incluir mapas dinámicamente ( no tienes la dirección cuando escribes el código ) o quieres personalizar los textos de los puntos de interés tendrás que usar el API.

Lo primero que has de hacer para usar el API es tener una cuenta con Google y registrar en el API usando este enlace. Una vez tengas la clave para usar el API en tu web ya estas preparado para empezar a picar código.

Necesitas incluir en tu cabecera HTML el fichero javascript del API. Para ello:

<script src=”http://maps.google.com/maps?file=api&v=1&key=TU_CLAVE” type=”text/javascript”></script>

Substituye TU_CLAVE por la clave que te han proporcionado al registrarte.

En el lugar donde queramos ver el mapa pondremos un div como por ejemplo:

<div id=”div_map1″ style=”width: 425px; height: 350px”></div>

Para cargar el mapa lo haremos por javascript así que ya sabes que lo has de introducir dentro de las etiquetas correspondientes( <script type=”text/javascript”></script>  ). Vamos a ver un par de ejemplos.

Puedes ver los ejemplos en la pagina.

Ejemplo 1

var map = new GMap2(document.getElementById(“div_map1″));
map.setCenter(new GLatLng(41.405317,2.176829), 15);
map.setUIToDefault();

En la primera linea creamos una variable del tipo GMap2. Cada objeto de esta clase define un único mapa de la página. Como puedes ver le pasamos por parámetro el div donde queremos ver el mapa( div_map1 ).

En la segunda linea inicializamos el mapa. Para ello llamamos al método setCenter pasándole las coordenadas que deben centrarse en el mapa ( utilizamos la clase GLatLng ) y el nivel de zoom.

Si queremos ver en el mapa los botones típicos de google ( zoom, tipo de mapa… ) deberemos llamar al método setUIToDefault.

Ejemplo 2

var map2 = new GMap2(document.getElementById(“div_map2″));
map2.setCenter(new GLatLng(41.405317,2.176829), 15);
map2.setUIToDefault();
var point = new GLatLng(41.405317,2.176829);
var marker = new GMarker(point);
GEvent.addListener(marker, “click”, function() {
var myHtml = “Texto <b>HTML</b> que quieres mostrar en el punto”;
map2.openInfoWindowHtml(point, myHtml); });
map2.addOverlay(marker);

En este ejemplo mostraremos el mapa igual que en el primero pero añadiremos un marcador. Al pulsar el marcador se mostrara un mensaje con información.

Las tres primeras lineas del código son iguales a las del ejemplo 1.

En la cuarta linea creamos un punto ya que lo utilizaremos varias veces. Después creamos un objeto del tipo GMarker que es el encargado de mostrar un punto en el mapa. Le pasamos como parámetro el punto donde debe apuntar.

Las lineas siguientes crearan el evento click sobre el marcador. Para ello llamamos a GEvent.addListener que se encargara de crear el evento. Pasamos como parámetro el marcador, que evento enlazamos y que debe hacer.

La última linea añade el marcador, incluyendo el evento, al mapa.

Ire añadiendo ejemplos practicos cuando tenga algo mas de tiempo. Si estas interesado en algo concreto comentalo y espero poder ayudarte.

Este es el primer post de Vida en la Luna y de mi vida así que no prometo nada.

Soy Dani y intentare traeros las novedades del mundo de la tecnología y cualquier cosa interesante que encuentre por la web.

Espero “engañar” a algunos amig@s para que me ayuden a levantar esto, así que si hay suerte en breve os presento algún editor nuevo.

Un saludo!