Professional Documents
Culture Documents
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.
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.
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 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.
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('');
ge.getWindow().setVisibility(true);
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();
})
});
Explicando
<script type="text/javascript" src="js/jquery-x.js"></script>
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();
Funcin que dice que el botn con id busca que ejecute la funcin buscar() al
darle click.