Olá, amigos, hoje vamos colocar o Google Earth em nosso site. É, você não leu errado, não, é Google Earth mesmo.
Estou falando da “nova” API do Google Earth.
O que o Google diz sobre isto?
O plug-in do Google Earth e a API JavaScript permitem incorporar o Google Earth, um verdadeiro globo digital em 3D, nas suas páginas da web. Usando a API, você pode desenhar marcadores e linhas, dispor imagens sobre a área, adicionar modelos em 3D ou carregar arquivos KML, permitindo criar aplicativos sofisticados para mapas em 3D. Se você tem um site de API do Google Maps, pode ativar 3D em sua página com uma única linha de código.
Ótimo, podemos utilizar a API do Google Maps! Vamos ver então um exemplo simples da API do Google Earth e vamos também utilizar o nosso exemplo do artigo anterior (Colocando minha empresa no mapa), onde utilizamos a API do Google Maps, para incluir um novo Servidor de Mapas que será o Google Earth.
Bom, aconselho você ler o artigo anterior antes de seguir, pois necessitamos obter uma chave de segurança da API do Google para utilizá-la neste exemplo. Segue o link (Obtendo uma Chave de API).
Vamos ao Hello, Earth!
Obtendo o Pluggin para rodar o Google Earth no seu browser
Não adianta você ter instalado o Google Earth na sua máquina. Você precisa de um plugin específico para rodar esta API no seu browser.
Para instalar, acesso o link http://code.google.com/apis/earth/ e clique no mapa para baixar o plugin.
Instale o plugin na sua máquina e pronto. Você já pode rodar o Google Earth no seu browser.
Vamos ao código:
<html>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<head>
<title>Hello Google Earth!</title>
<!-- Adicionando a API (!!Não esqueça de alterar a sua chave!!)-->
<script src="http://www.google.com/jsapi?key=SUA_CHAVE_AQUI"></script>
<script>
google.load("earth", "1");
var ge = null;
// Função Inincial -> Chamada no OnLoad
function init() {
// Instancia o Objeto dentro da DIV map3d,
// caso sucesso, chama a função initCallback, senão, failureCallback
google.earth.createInstance("map3d", initCallback, failureCallback);
}
function initCallback(object) {
ge = object; //Adiciona o Objeto na variável global ge
//Dá visibilidade ao Google Earth dentro do navegador.
ge.getWindow().setVisibility(true);
}
function failureCallback(object) { }
</script>
</head>
<body onload='init()' id='body'>
<center>
<div id='map3d_container'
style='border: 1px solid silver; height: 600px; width: 800px;'>
<div id='map3d' style='height: 100%;'></div>
</div>
</center>
</body>
</html>Resultado
Pronto, temos apenas um Hello World acima, uma visão do globo geral.
Para visualizar um exemplo de como adicionar controles de navegação, escala, grid, mapa de referência, etc, acesse este link: http://earth-api-samples.googlecode.com/svn/trunk/demos/options/index.html.
É muito simples ampliar as ferramentas do seu mapa.
Integrando o Google Earth API no Google Maps API
Ok, vamos pegar o nosso exemplo do artigo anterior e integrar com o a API Google Earth.
Lembram do código?
Resultado
Alterando o código
– Alteramos as linhas 8,9,10: trocamos a API do Google Maps pela API do Google Earth
– Linha 14: Adicionado o Load da API do Google Maps
– Linha 23: Adicionado o Layer do Google Earth
– Linha 27: Adicionado os controles de layers
Como ficou
Não se esqueça, acesse o site dos desenvolvedores, http://code.google.com/intl/pt-BR/apis/earth/, e visualize os exemplos e as referências das APIs do Google Maps e Google Earth. Apenas com os exemplos disponibilizados pelo Google você aumenta a qualidade do seu site sem muito esforço.
Bom, por hoje era isso pessoal, no próximo artigo vou falar um pouco sobre a API do Google Static Maps.
Até mais.
De 0 a 10, o quanto você recomendaria este artigo para um amigo?