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.

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.

Han estado trabajando en un sistema que viene a ser el futuro de la comunicación. Simplificando mucho podríamos decir que es la evolución del mail que utilizamos a diario para comunicarnos. Han trabajado duro y realmente parece que pueden tener un sistema capaz de destronar el correo actual.

Todo el sistema gira entorno a lo que ellos llaman Waves. La definición de wave según la pagina oficial seria:

• Una wave es a parte iguales conversación y documento. La gente puede comunicarse y trabajar conjuntamente con texto con formato, vídeos, fotos, mapas y mas.
• Una wave es compartida. Cualquier participante puede contestar en cualquier lugar del mensaje, editar el contenido y añadir participantes en cualquier momento. Cualquiera puede rebobinar y ver quien dijo que y cuando.
• Una wave es vida. Con transmisión en vivo mientras escribes, los participantes de una wave pueden tener una conversación mas fluida, ver las ediciones y interaccionar en tiempo real

Una cosa interesante es que todo el sistema va a ser OpenSource aunque es un movimiento bastante lógico si quieren que triunfe. Por lo que parece van a liberar el código y cualquiera va a poder modificarlo y montarse su propio servidor. Quieren conseguir que cualquiera tenga un servidor de Waves, tal y como pasa con el correo.

Igual que han echo con Google Maps por ejemplo, han creado APIs y la capacidad de trabajar con extensiones para que los desarrolladores integren o amplíen el servicio. En la presentación pudimos ver la integración con twitter o algunas extensiones bastante interesantes.

Me llama la atención el corrector ortográfico, que no solo corrige palabras que no existen sino que lo hace según el contexto, y el traductor en tiempo real del ingles al francés. Se ve claramente que Google esta trabajando en sistemas que entiendan los textos y el acercamiento a la web semántica que se habla desde hace un tiempo.

A mi se me plantean dos dudas:

• Va a funcionar este sistema? Parece que cada cosa que realizamos envía respuestas y peticiones a los servidores. Cada letra o palabra va a generar varios envío. Son muchas peticiones y no tengo muy claro si en el mundo real ( y no en los servidores en los que se probo en la presentación ) funcionara y sera lo suficientemente fluido como para no incomodar al usuario.
• La gente “normal” va a saber utilizarlo y le va a ser útil? A los que vivimos todo este mundillo esta claro que nos va a gustar y que aprenderemos a usarlo. Pero la gente que no esta tan preocupada por la tecnología no tengo claro si va a saber usarlo y si le va a aportar algo nuevo e interesante a su vida.

Para los que os interese saber mas aquí os dejo el vídeo de la presentación oficial. Es un poco largo y en ingles pero es bastante interesante y ayuda a entender de que va Google Wave.

La pagina oficial ( en ingles tambien )