Uso del API de Google Earth
Anuncio
API Google Earth
3CM5
Web App Dev
Equipo PapaJones
Integrantes:
Badillo Puebla Charlie
Morales Días Yorch
Martínez Bello Alan Omar
Rocha García Dan
Introducción
Google Maps dispone de una amplia matriz de API que permite al usuario insertar las funciones
más completas y la utilidad diaria de Google Maps en su propio sitio web y en sus propias
aplicaciones, así como superponer sus propios datos sobre ellas.
Google Earth API
Permite a los usuarios insertar un globo digital en 3D en sus páginas web. De este modo, los
usuarios que visiten la página del usuario podrán viajar por cualquier lugar del mundo (incluso por
debajo del océano) sin salir de la página.
¿Qué es el API de Google Earth?
El complemento de Google Earth y su API de JavaScript te permiten insertar Google Earth, un
auténtico globo terráqueo digital en 3D, en tus páginas web. Puedes utilizar el API para crear
sofisticadas aplicaciones de mapas tridimensionales mediante el trazado de marcadores y líneas, la
colocación de imágenes en la superficie, la incorporación de modelos en 3D o la carga de archivos
KML.
Para iniciar…
En este tutorial crearemos una página básica aplicando Google Earth API de Google Maps.
Dispondremos de una sola página y no es necesario tener algún servidor local para que funcione
ya que esta para usar la API no es suficiente Javascript.
Si ya tienes conocimiento de la API Google Maps o Google Static Maps, podrás ver que esta
versión lo único que tiene de diferencia es que te permite crear marcadores y líneas, pero en 3D.
Instalación
Para iniciar se requiere del plugin o complemento de Google Earth, para adquirirlo es suficiente
acceder
a
cualquier
página
en
la
que
esté
incluido
(como,
por
ejemplo, http://code.google.com/apis/earth). Es probable que el navegador te pida permiso para
instalar el complemento. Haz clic para permitir la instalación. Una vez que esté instalado el
complemento, es posible que tengas que actualizar la página para que se muestre correctamente.
Desinstalación
Para desinstalar el complemento de Google Earth en Windows, selecciona Inicio > Complemento
de Google Earth > Desinstalar
Puede ser que esté como Uninstall Google Earth Plugin si es que deseas buscarlo desde el
buscador rápido.
Uso del API de Google Earth
Para cargar el complemento de Google Earth en tu página web, debes realizar los pasos siguientes:
Carga el API de Google Earth.
Crea un elemento DIV para que contenga el complemento.
Crea funciones para inicializar el complemento.
Una vez que la página se haya cargado, ejecuta las funciones de inicialización.
Para las funciones de inicialización puedes ocupar cualquier otra librería de Javascript (JQuery,
Scriptaculous, etc.).
Carga del API de Google Earth
Coloca esta etiqueta en el elemento <head> de tu página HTML, sustituyendo ABCDEF por tu
propia clave, en este caso, utilizaremos la clave ya obtenida en clases anteriores
(ABQIAAAAwbkbZLyhsmTCWXbTcjbgbRSzHs7K5SvaUdm8ua-Xxy_-2dYwMxQMhnagaawTo7L1FE1amhuQxIlXw) :
<script src="http://www.google.com/jsapi?key=ABCDEF"></script>
El código fuente (src) de la etiqueta apunta a un archivo JavaScript con un único
método, google.load, utilizado para cargar API individuales de Google. Dentro de una
etiqueta <script> nueva, ejecuta:
google.load("earth", "1");
De este modo, Google carga el módulo earth en el nombre de espacio google.earth a la vez que se
especifica la versión 1 (la versión estable más reciente del API). Para especificar la versión más
reciente del API, especifica "1.x".
Creación de un contenedor para el complemento
El complemento de Google Earth se carga en un elemento DIV con una ID única. Añade el
elemento DIV a la sección <body> de tu página:
<div id="map3d" style="height: 400px; width: 600px;"></div>
En el ejemplo anterior, el elemento DIV denominado map3d es el elemento de destino del
complemento, es decir, donde va a aparecer tu mapa desde la API.
Creación de funciones de inicialización
Como parte de este paso, debes crear tres funciones. En orden, estas funciones:
intentan crear una instancia nueva del complemento,
se ejecutan cuando la instancia del complemento se crea correctamente,
se ejecutan si la instancia no se puede crear.
La primera función es la siguiente:
function init() {
google.earth.createInstance('map3d', initCB, failureCB);
}
Aquí, google.earth.createInstance muestra tres argumentos: el elemento DIV al que se debe
añadir la instancia, la función que se debe ejecutar cuando se devuelve un resultado correcto y la
función que se debe ejecutar si se devuelve un error.
La función de devolución de llamada correcta contiene todo el código necesario para configurar tu
experiencia de "primera ejecución": todos los objetos y vistas que aparecerán en primer lugar al
cargar la instancia del complemento en el navegador. Esta función debe contener el
método GEWindow.setVisibility y, para que el complemento esté visible dentro de su elemento
DIV, el valor de la visibilidad de la ventana debe establecerse en true:
function initCB(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
}
La devolución de llamada de error puede contener cualquier código para tratar de solucionar un
error y crear la instancia del complemento. El código de error se transmite a la función de
devolución de llamada y se puede repetir en la página o, si lo deseas, como una alerta. A lo largo
de esta guía, la función de devolución de llamada se deja vacía:
function failureCB(errorCode) {
}
Recuerda que la variable ge es una variable global si es que quieres utilizarlo posteriormente.
Ejecución de la función de inicialización al cargar la página
En el nombre de espacio de Google se incluye la función setOnLoadCallback(), que ejecuta la
función especificada una vez cargadas la página HTML y las API que se han solicitado. El uso de
esta función garantiza que el complemento no se cargue hasta que el DOM de la página se
externaliza por completo.
google.setOnLoadCallback(init);
Ejemplo complete
<html>
<head>
<title>Ejemplin</title>
<script src="http://www.google.com/jsapi?key=ABCDEFG"> </script>
<script type="text/javascript">
var ge;
google.load("earth", "1");
function init() {
google.earth.createInstance('map3d', initCB, failureCB);
}
function initCB(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
}
function failureCB(errorCode) {
}
google.setOnLoadCallback(init);
</script>
</head>
<body>
<div id="map3d" style="height: 400px; width: 600px;"></div>
</body>
</html>
Si lo ejecutas podrás ver un globo terráqueo bien padre, y te podrás mover con el mouse,
utilizando la ruedita para mover los ángulos de la cámara.
Un ejemplo más elaborado
Seguramente dirás, pues eso qué, ¿no?
Así que enseguida te mostramos un ejemplo para ver tu casa desde Google Earth API.
Para iniciar… de nuevo
Para hace todo esto más pro, utilizaremos la API de Javascript, JQuery, que puedes bajar desde
www.jquery.com, la agregamos a la página insertando la siguiente línea de código:
<script type="text/javascript" src="js/jquery-x.js"></script>
Donde x es la versión que bajaste.
Ahora, vamos a ocupar la API de Google Maps para la ubicación de tu casa, agregando la siguiente
línea de código:
google.load("maps", "2");
Para quitar las líneas feas que se ven, y poder ver los edificios bien padres en 3D, inserta las
siguientes líneas de código dentro de la función de inicialización (initCB)
ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, false);
ge.getLayerRoot().enableLayerById(ge.LAYER_BUILDINGS, true);
Y las siguientes para poder manejar la cámara y obtener la vista (posición) que buscas.
ge.getOptions().setAtmosphereVisibility(true);
la = ge.createLookAt('');
cam = ge.createCamera('');
ge.getWindow().setVisibility(true);
Ahora agrega las siguientes líneas de código que explicaremos más adelante:
geocoder = new google.maps.ClientGeocoder();
Dentro de la función init y:
function submitLocation() {
var address = $("#direccion").val();
geocoder.getLatLng(
address,
function(point) {
if (point && geMaster != null)
la = geMaster.createLookAt('');
la.set(point.y, point.x, 0, geMaster.ALTITUDE_RELATIVE_TO_GROUND,
500, 45, 600);
geMaster.getView().setAbstractView(la);
}
);
}
$(function(){
$("#busca").click(function(){
buscar();
})
});
Y dentro del html las siguientes:
<input type=text size=40 id='direccion'/>
<input type=button value='Buscar tu casa' id="busca">
Ahora podrás ver tu casa desde los satélites =).
Nota: Si quieres ver edificios en 3D te recomendamos la dirección “New York WallStreet”, y está
bien paike.
Explicando
<script type="text/javascript" src="js/jquery-x.js"></script>
Agrega la biblioteca de JQuery utilizada para obtener el div y el campo de texto, así como aplicarle
el evento de click al botón
google.load("maps", "2");
Inicializa la API Google Maps
ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, false);
ge.getLayerRoot().enableLayerById(ge.LAYER_BUILDINGS, true);
ge.getOptions().setAtmosphereVisibility(true);
la = ge.createLookAt('');
cam = ge.createCamera('');
Aplica opciones a la vista de Google Earth, diciéndole que quieres ver los edificios pero no las
fronteras. Y asigna a la y cam la vista y la cámara definidas en la API.
geocoder = new google.maps.ClientGeocoder();
Instancia a la variable geocoder un cliente de Google Maps que es el que va a buscar la dirección
ingresada.
function submitLocation() {
var address = $("#direccion").val();
geocoder.getLatLng(
address,
function(point) {
if (point && geMaster != null)
la = geMaster.createLookAt('');
la.set(point.y, point.x, 0, geMaster.ALTITUDE_RELATIVE_TO_GROUND,
500, 45, 600);
geMaster.getView().setAbstractView(la);
}
);
}
Función que se va a ejecutar al darle click al botón, le entrega el valor del campo de texto a la
variable address, que posteriormente será un argumento de la función getLangLng, función que
regresa una variable point con atributos x e y a partir de la dirección ingresada, mismo punto que
se va a manejar con la variable la (la vista obtenida en ge).
$(function(){
$("#busca").click(function(){
buscar();
})
});
Función que dice que el botón con id “busca” que ejecute la función buscar() al darle click.