API Google Earth

API Google Earth
3CM5
Web App Dev
Equipo PapaJones
Integrantes:
Badillo Puebla Charlie
Morales Das Yorch
Martnez Bello Alan Omar
Rocha Garca Dan
Introduccin
Google Maps dispone de una amplia matriz de API que permite al usuario
insertar las funciones ms 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 pginas web. De
este modo, los usuarios que visiten la pgina del usuario podrn viajar por
cualquier lugar del mundo (incluso por debajo del ocano) sin salir de la
pgina.
Qu es el API de Google Earth?

El complemento de Google Earth y su API de JavaScript te permiten insertar
Google Earth, un autntico globo terrqueo digital en 3D, en tus pginas web.
Puedes utilizar el API para crear sofisticadas aplicaciones de mapas
tridimensionales mediante el trazado de marcadores y lneas, la colocacin de
imgenes en la superficie, la incorporacin de modelos en 3D o la carga de
archivos KML.
Para iniciar
En este tutorial crearemos una pgina bsica aplicando Google Earth API de
Google Maps. Dispondremos de una sola pgina y no es necesario tener algn
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, podrs
ver que esta versin lo nico que tiene de diferencia es que te permite crear
marcadores y lneas, pero en 3D.
Instalacin
Para iniciar se requiere del plugin o complemento de Google Earth, para
adquirirlo es suficiente acceder a cualquier pgina 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 instalacin. Una vez que est instalado el complemento, es posible que
tengas que actualizar la pgina para que se muestre correctamente.
Desinstalacin
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 rpido.
Uso del API de Google Earth

Para cargar el complemento de Google Earth en tu pgina 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 pgina se haya cargado, ejecuta las funciones de
inicializacin.
Para las funciones de inicializacin puedes ocupar cualquier otra librera de
Javascript (JQuery, Scriptaculous, etc.).
Carga del API de Google Earth

Coloca esta etiqueta en el elemento <head> de tu pgina HTML,
sustituyendo ABCDEF por tu propia clave, en este caso, utilizaremos la clave ya
obtenida en clases anteriores
(ABQIAAAAwbkbZLyhsmTCWXbTcjbgbRSzHs7K5SvaUdm8ua-Xxy_2dYwMxQMhnagaawTo7L1FE1-amhuQxIlXw) :
<script src="http://www.google.com/jsapi?key=ABCDEF"></script>
El cdigo fuente (src) de la etiqueta apunta a un archivo JavaScript con un
nico mtodo, 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 mdulo earth en el nombre de
espacio google.earth a la vez que se especifica la versin 1 (la versin estable
ms reciente del API). Para especificar la versin ms reciente del API,
especifica "1.x".
Creacin de un contenedor para el complemento

El complemento de Google Earth se carga en un elemento DIV con una ID
nica. Aade el elemento DIV a la seccin <body> de tu pgina:
<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.
Creacin de funciones de inicializacin

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 funcin 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 aadir la instancia, la funcin que se debe ejecutar cuando se
devuelve un resultado correcto y la funcin que se debe ejecutar si se devuelve
un error.
La funcin de devolucin de llamada correcta contiene todo el cdigo necesario
para configurar tu experiencia de "primera ejecucin": todos los objetos y
vistas que aparecern en primer lugar al cargar la instancia del complemento
en
el
navegador.
Esta
funcin
debe
contener
el
mtodo 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 devolucin de llamada de error puede contener cualquier cdigo para tratar

de solucionar un error y crear la instancia del complemento. El cdigo de error
se transmite a la funcin de devolucin de llamada y se puede repetir en la
pgina o, si lo deseas, como una alerta. A lo largo de esta gua, la funcin de
devolucin de llamada se deja vaca:
function failureCB(errorCode) {
}
Recuerda que la variable ge es una variable global si es que quieres utilizarlo

posteriormente.
Ejecucin de la funcin de inicializacin al cargar la pgina

En el nombre de espacio de Google se incluye la funcin setOnLoadCallback(),
que ejecuta la funcin especificada una vez cargadas la pgina HTML y las API
que se han solicitado. El uso de esta funcin garantiza que el complemento no
se cargue hasta que el DOM de la pgina 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;
}
function failureCB(errorCode) {
}
google.setOnLoadCallback(init);
</script>
</head>
<body>
<div id="map3d" style="height: 400px; width: 600px;"></div>
</body>
</html>
Si lo ejecutas podrs ver un globo terrqueo bien padre, y te podrs mover con
el mouse, utilizando la ruedita para mover los ngulos de la cmara.
Un ejemplo ms elaborado
Seguramente dirs, 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 ms pro, utilizaremos la API de Javascript, JQuery, que
puedes bajar desde www.jquery.com, la agregamos a la pgina insertando la
siguiente lnea de cdigo:
<script type="text/javascript" src="js/jquery-x.js"></script>
Donde x es la versin que bajaste.
Ahora, vamos a ocupar la API de Google Maps para la ubicacin de tu casa,

agregando la siguiente lnea de cdigo:
google.load("maps", "2");
Para quitar las lneas feas que se ven, y poder ver los edificios bien padres en
3D, inserta las siguientes lneas de cdigo dentro de la funcin de inicializacin
(initCB)
ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, false);
ge.getLayerRoot().enableLayerById(ge.LAYER_BUILDINGS, true);
Y las siguientes para poder manejar la cmara y obtener la vista (posicin) que
buscas.
ge.getOptions().setAtmosphereVisibility(true);
la = ge.createLookAt('');
cam = ge.createCamera('');
Ahora agrega las siguientes lneas de cdigo que explicaremos ms adelante:

geocoder = new google.maps.ClientGeocoder();
Dentro de la funcin 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 podrs ver tu casa desde los satlites =).
Nota: Si quieres ver edificios en 3D te recomendamos la direccin 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 botn
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, dicindole que quieres ver los
edificios pero no las fronteras. Y asigna a la y cam la vista y la cmara
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 direccin 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);
}
);
}
Funcin que se va a ejecutar al darle click al botn, le entrega el valor del

campo de texto a la variable address, que posteriormente ser un argumento
de la funcin getLangLng, funcin que regresa una variable point con atributos
x e y a partir de la direccin ingresada, mismo punto que se va a manejar con
la variable la (la vista obtenida en ge).
$(function(){
$("#busca").click(function(){
buscar();
})
});
Funcin que dice que el botn con id busca que ejecute la funcin buscar() al
darle click.

API Google Earth

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

API Google Earth

Uploaded by

Copyright:

Available Formats

API Google Earth

Google Earth API

Qu es el API de Google Earth?

Uso del API de Google Earth

Carga del API de Google Earth

Creacin de un contenedor para el complemento

Creacin de funciones de inicializacin

intentan crear una instancia nueva del complemento,

La primera funcin es la siguiente:

Aqu, google.earth.createInstance muestra tres argumentos: el elemento DIV al

La devolucin de llamada de error puede contener cualquier cdigo para tratar

Recuerda que la variable ge es una variable global si es que quieres utilizarlo

Ejecucin de la funcin de inicializacin al cargar la pgina

Para iniciar de nuevo

Donde x es la versin que bajaste.

Ahora, vamos a ocupar la API de Google Maps para la ubicacin de tu casa,

Ahora agrega las siguientes lneas de cdigo que explicaremos ms adelante:

Dentro de la funcin init y:

Y dentro del html las siguientes:

Ahora podrs ver tu casa desde los satlites =).

Nota: Si quieres ver edificios en 3D te recomendamos la direccin New York

Agrega la biblioteca de JQuery utilizada para obtener el div y el campo de

Inicializa la API Google Maps

Instancia a la variable geocoder un cliente de Google Maps que es el que va a

Funcin que se va a ejecutar al darle click al botn, le entrega el valor del

You might also like