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.