Informações sobre a Publicação

Você está actualmente a ler:
Série de Tutoriais Google Earth – Dia 2,
uma entrada em Webgrafismo.

Publicado: 11 Janeiro, 2010 / 19:01

Categoria(s): 3D, AJAX, Google

Série de Tutoriais Google Earth – Dia 2

Subscreva via ♥ ♥ Partilhe no ♥ ♥ ♥ ♥ Email

Neste segundo dia vamos criar a nossa primeira interface Google Earth em português, recorrendo a linguagens de marcação. Depois vamos adicionar a funcionalidade de Geocoding graças à API do Google Maps. Desta forma os utilizadores poderão procurar dados geográficos (ex.: rua, cidade, país ou código postal) no Google Earth. Vamos também informar os utilizadores sobre o estado actual do carregamento de dados pela implementação de um pre-loader.

Cabeçalho

Comece por criar o HEAD do documento HTML. Especifique o DOCTYPE, HTML e META.
Dê o título ao documento e importe a folha de estilos em CSS.

1
2
3

  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
  <title>Série de Tutoriais Google Earth - Dia 2</title>
  <link rel="stylesheet" href="estilo.css" type="text/css" media="screen" />

Introduza a chave da API Google Maps. Esta chave é única para o site em questão.
Veja no tutorial do dia 1 como gerar a chave para o seu site.

1	<script src="http://www.google.com/jsapi?key=ABQIAAAA0247eGts3bxwXcVn61Qd1xQRgD1noIp8juEBMafYaVy0WFUWrBT5Br5FtSzKiuh35iYcN0oIyNuscg"></script>

A seguir ainda no HEAD, introduza o seguinte javascript:

  <script type="text/javascript">
 
    var ge;
    google.load("earth", "1", {"language" : "pt"});
    google.load("maps", "2", {"language" : "pt"});
 
    function init() {
      google.earth.createInstance('map3d', initCallback, failureCallback);
    }
 
    function initCallback(instance) {
      ge = instance;
      ge.getWindow().setVisibility(true);
      ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);
      ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
      ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);
 
      setInterval(function() {
        var streamingPercent = ge.getStreamingPercent();
        var progressBar = document.getElementById('bar');
        if (streamingPercent == 100) {
          progressBar.style.width = '220px';
        } else {
          progressBar.style.width = (220 * streamingPercent / 100) + 'px';
        }
      }, 100);
 
    }
 
    function failureCallback(errorCode) {}
 
    function buttonClick() {
     var geocodeLocation = document.getElementById('location').value;
      var geocoder = new google.maps.ClientGeocoder();
      geocoder.getLatLng(geocodeLocation, function(point) {
        if (point) {
          var lookAt = ge.createLookAt('');
          lookAt.set(point.y, point.x, 10, ge.ALTITUDE_RELATIVE_TO_GROUND, 0, 10, 3000);
          ge.getView().setAbstractView(lookAt);
        }
      });
 
    }
  </script>

No início são criados 2 módulos: “earth” e “maps”:

1 2	google.load("earth", "1", {"language" : "pt"}); google.load("maps", "2", {"language" : "pt"});

O método “google.load” tem o seguinte protótipo:

1	google.load(moduleName, moduleVersion, optionalSettings)

moduleName: É o nome da API (ex.: “maps” ou “earth”).
moduleversion: Versão do módulo da API (argumento obrigatório especificar).
optionalSettings: Especifica as opções de configuração para a API.

O idioma que vai utilizar para pesquisar no mapa e ver as informações é o português.
Se quisesse ver em Japonês, então teria de colocar no argumento optionalSettings:

1	{"language" : "ja"}.

A seguir é criada a instância Earth que tem como argumentos:

1
2
3

    function init() {
      google.earth.createInstance('map3d', initCallback, failureCallback);
    }

map3D: É um DIV que irá conter a API.

initCallback: É a primeira ligação feita pela API do Google Earth. Cria a instância do objecto, que tem como características, a possibilidade de vermos os nomes das ruas ou estradas.
Aqui é também obtido o streaming de dados e o efeito de animação através de setInterval() (de 100 em 100 milissegundos).

failureCallback: Verifica falhas na conexão ao servidor da Google.

    function buttonClick() {
     var geocodeLocation = document.getElementById('location').value;
      var geocoder = new google.maps.ClientGeocoder();
      geocoder.getLatLng(geocodeLocation, function(point) {
        if (point) {
          var lookAt = ge.createLookAt('');
          lookAt.set(point.y, point.x, 10, ge.ALTITUDE_RELATIVE_TO_GROUND, 0, 10, 3000);
          ge.getView().setAbstractView(lookAt);
        }
      });

A função buttonClick() permite que encontre pontos no Google Earth através do serviço de geo referênciamento disponibilizado pela API do Google Maps (objecto ClientGeocoder). A função é também responsável pela pesquisa de informação no mapa, assim que o utilizador realiza um acção sobre o botão, ou prime na tecla Enter.

Corpo

Assim que o browser ler o BODY, este irá activar a função init().
O corpo do documento é constituído pelos DIV’s principais:

#header:
- Contem a entrada de texto e o botão no div #pesq.
- Contem o preloader nos DIV’s #content e #bar.

#map3d:
- É o DIV que irá conter o Google Earth.

<body onload="init()">
 
 <div id="header">
 
    <div id="pesq">
	  <input type="text" class="txt" size="23" id="location" onkeydown="if (event.keyCode == 13) document.getElementById('btnSearch').click()" value="Digite e prima enter ..."/>
	  <input type="button" class="btn" id="btnSearch" value="" onclick="buttonClick();"/>
    </div>
 
    <div id="preloader"><div id="content"><div id="bar"></div></div></div>
 
  </div>
 
  <div id="map3d"></div>
 
</body>

Folha de Estilos

A folha de estilos tem indicado diversas regras para a formatação do conteúdo, com destaque para 960px de largura da aplicação, e 350px para a altura do Google Earth.
Para estilizar o formulário de pesquisa, utilizei imagens feitas no photoshop (disponíveis no download).
O GIF animado utilizado para o efeito de pre-loader foi gerado no site www.ajaxload.info.

*{ margin:0; padding:0; }
 
body{
	background:#000;
	font-family:arial 11px #999;
	margin:0px auto;
	text-align:center;
}
 
#header{
	margin:0 auto;
	text-align:center;
	height:40px !important;
	width:960px;
	background:url(bg-header.gif) top center repeat-x;
	border-bottom:1px solid #333;
	border-left:1px solid #333;
	border-right:1px solid #333;
	overflow:hidden;
	clear:both;
}
 
#pesq{
	width:190px;
	float:left;
	position:relative;
	background:url(bg-pesquisa.gif) 0 0 no-repeat;
	height:25px;
	left:10px;
	top:8px;
}
 
#pesq input.txt{
	color:#ddd;
	background:none;
	border:none;
	padding:2px;
	position:absolute;
	top:4px;
	left:35px;
	font-size:8pt;
}
 
#pesq input.btn{
	color:#ddd;
	border:none;
	position:absolute;
	left:190px;
	cursor:pointer;
	font-size:9pt;
	width:25px;
	height:25px;
	background:url(btn-pesquisa.gif) center center no-repeat;
}
 
#preloader{
	position:relative;
	float:right;
	right:5px;
	text-align:left;
	top:3px;
	margin:0px;
	padding:7px 0 5px 5px;
	width: 220px;
}
 
#content{
	width:220px;
	height:500px;
}
#bar{
	width:0;
	height:20px;
	background: transparent url(loader.gif) center left no-repeat
}
 
#map3d{
	text-align:center;
	width:960px;
	margin:0 auto;
	height:350px;
	position:relative;
	top:0px;
	border-bottom:1px solid #333;
	border-left:1px solid #333;
	border-right:1px solid #333;
}

Resultado Final

No próximo dia vamos abordar o objecto ClientGeocoder, um serviço de geocoding da API Google Maps. E abordar a latitude e longitude, bem como outros conceitos. Até lá, vá praticando!

♥ ♥

Google Earth é uma aplicação que já todos conhecemos. Oferece-nos mapas 3D e imagens de satélite para regiões específicas mediante pesquisas. Recentemente a Google disponibilizou a API do Earth que nos permite brincar com os seus módulos via browser, e é graças a estes módulos que iremos passo a passo começar a elaborar as nossas [...]

♥ ♥

As galerias de imagens e os sliders jQuery são muito comuns em sites de portefólio e, são muito úteis para qualquer outro site que pretende mostrar imagens e fotografias. Felizmente, adicionar uma galeria jQuery não precisa de ser difícil, mesmo que você não tenha muita experiência com JavaScript e jQuery. Neste artigo encontra tutoriais & [...]

♥ ♥

AJAX API Playground da Google permite que web developers possam guardar e exportar características das API’s (Application Programming Interface) e implementar-mos nas nossas aplicações. Por vezes, a documentação não é suficiente para aprender tudo sobre as API’s. Na realidade, precisamos de exemplos para que possamos brincar e descubrir todas as suas potencialidades. E é por [...]

♥ ♥

O Natal e a Passagem de Ano estão a aproximar-se e muitos websites estão a criar temas para os seus designs, logos, newsletters, banners e também muito material para impressão. Com isto, é possível que os designers estejam com necessidade de objectos de qualidade para o tema sobre o Natal. Aqui fica um pack gigante [...]

Pedro Magalhaes

Sobre o autor

User Interface Designer e Front End Developer. Autor do site Web Grafismo e programador na empresa Visualforma no Algarve.

Respostas a “Série de Tutoriais Google Earth – Dia 2”

Nuno 23.01.2010 a 12:04
Olá Pedro
Realmente são espectaculares os resultados, até tinha pensado utiliza-los num site de mapas, mas ainda não houve oportunidade. Já agora pergunto-te porque utilizas o .RAR para compactar ficheiros e não o ZIP?
Pedro Magalhães 27.01.2010 a 23:11
Olá Nuno
Obrigado pelo comentário. Espero que consigas implementar nos teus projectos. Toma é atenção às licenças.
Quanto à minha escolha do .RAR em relação ao .ZIP não se deve a nenhuma razão em especial. Simplesmente uso o .RAR há mais de 10 anos, e habituei-me a ele é só.
Abraço e continuação de bons projectos ;)

O que tens a dizer?

Registar o seu Gravatar.

Webgrafismo