Esta va a ser la primera de una serie de entregas que nos servirán para adentrarnos en Google Earth API, la interfaz que nos proporciona Google para juguetear con ese globo 3D que ya todos conocemos.
En este post, en el que se incluye el código utilizado, veremos cómo un sencillo formulario, algo de jQuery básico y menos de 100 líneas de código javascript bastan para tener en nuestra web el mapa 3D con un control total sobre las capas de información que Google nos proporciona y un buscador que nos permita redireccionar a cualquier punto de la Tierra.
Hello World
Lo primero que haremos será mostrar el mapa, para lo cual nos creamos un archivo HTML con un div donde se pintará el globo terrestre e incluiremos referencias al archivo donde definiremos toda la lógica de la aplicación, así como a las API de Google Earth y jQuery.
<pre><code>Google Earth (Ejemplo 1)
</code></pre>
<script type="text/javascript" src="https://www.google.com/jsapi"></script><script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="js/inicializacionExplicada.js"></script>
Ahora, creamos ese archivo (inicializacion.js), añadiendo el siguiente trozo de código.
google.load('earth', '1.x', { 'language': 'es' });
google.load('maps', '3', { other_params: 'sensor=false' });
google.setOnLoadCallback( function inicializarPlugin() {
google.earth.createInstance('mapa3d', inicializar, terminacion);
});
Así, cargamos los plugins de Google Earth y Google Maps (necesario para implementar el buscador) y la función setOnLoadCallback, que evita que se cree la instancia del plugin hasta que todo el DOM esté construido. De esta manera, la función createInstance recibe:
- Identificador del div que va a contener el mapa terrestre.
- Función a llamar en caso de que la instancia se cree correctamente.
- Función para el caso de que haya problemas a la hora de crear la instancia.
Por lo tanto, con sólo poner visible el mapa en inicializarEventos con la sentencia necesaria “ge.getWindow().setVisibility(true)”, podríamos ver el mapa correctamente.
Parámetros configurables
Como el ejemplo incluye opciones de parametrización, en inicializarEventos también vamos a incluir los eventos que permitan activar/desactivar estos elementos configurables.
Si nos centramos en los diferentes elementos configurables (capas, opciones, etc.) que trae Google Earth, nos encontramos con capas tales como carreteras, edificios3D, terreno o datos informativos (aunque se llame borders…), las cuales pueden ser activadas/desactivadas a través de la función enableLayerById.
ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
ge.getLayerRoot().enableLayerById(ge.LAYER_BUILDINGS, true);
ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);
ge.getLayerRoot().enableLayerById(ge.LAYER_TERRAIN, true);
Por otra parte, hay otros 2 grupos de parámetros configurables que Google incorpora; el primero lo forman el Sol y la atmósfera, que al no tener influencia informativa directa sobre el mapa terrestre, no son consideradas capas en sí mismas, y el segundo son elementos informativos superpuestos como la leyenda del mapa, informaciones geográficas, etc.
ge.getSun().setVisibility(true);
ge.getOptions().setScaleLegendVisibility(true);
ge.getOptions().setStatusBarVisibility(true);
ge.getOptions().setOverviewMapVisibility(false);
ge.getOptions().setGridVisibility(true);
ge.getOptions().setAtmosphereVisibility(true);
BUSCADOR
La última sentencia de la función hace la redirección a la ciudad de Sevilla, lo cual se consigue mediante una llamada a un Web Service de Google pasándole la cadena de texto que hemos incluido en el buscador (para un caso genérico), devolviéndonos en el callback en formato JSON la latitud y longitud correspondientes a Sevilla, siempre que no haya habido problemas (status OK).
function buscarLocalizacion(direccion) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': direccion }, function (destino, status) {
if (status == google.maps.GeocoderStatus.OK) {
modificarVista(destino[0].geometry.location.lat(), destino[0].geometry.location.lng());
} else {
alert("Wrong direction");
}
});
}
Una vez tenemos las coordenadas, la forma de indicarle a la API que deseamos realizar la redirección es creando un objeto LookAt (range indica el zoom que deseamos sobre Sevilla) y pasándoselo al mapa.
function modificarVista(latitud, longitud){
var lookAt = globo.createLookAt('');
lookAt.setLatitude(latitud);
lookAt.setLongitude(longitud);
lookAt.setRange(6000);
globo.getView().setAbstractView(lookAt);
}
NOTA
Hay que tener en cuenta que, por motivos de brevedad, en el post se han obviado cosas como la creación del formulario y los eventos jQuery por considerarse sencillos de comprender.
Aquí puedes descargarte el código creado para realizar este ejemplo, donde puede verse el código completo para comprenderlo mejor.
Fuentes
https://developers.google.com/maps/documentation/javascript/geocoding
https://developers.google.com/loader/
https://developers.google.com/earth/
Autor: Antonio Manuel Acevedo
juanlao 