Mapas de Google API 2

helldanger1 · Jun 4, 2009

Atualizamos os artigos sobre mapas de google para mostrar a integração de mapas com o API 2.

Por Miguel Angel Alvarez - Tradução de JML

Certamente já conhecemos os Mapas de Google, um sistema que permite acessar a fotos de satélite de todo o mundo que teve bastante sucesso entre os Internautas. Se estamos lendo este artigo até poderemos saber que os Mapas de Google têm um API através da qual podemos integrá-lo como serviço em uma página web. Isto permite que em uma página web desenvolvida por nós mesmo possamos colocar mapas e vistas satélite de diferentes pontos do planeta, tudo de maneira gratuita.

Bom, já havíamos publicado um par de artigos sobre os Mapas de Google que explicavam as regras mais básicas para começar a publicar mapas satélite em nosso site.
O básico para começar a desenvolver com Google Maps I
Desenvolver com Google Maps II
Pero estes dois artigos se utilizavam uma API que Google atualizou, por tanto se tornava necessário uma revisão para mostrar códigos de integração de Google Maps que sejam compatíveis com o API que se utiliza agora.

Entretanto, os artigos anteriores continuam sendo muito interessantes para ler, porque explicam algumas coisas básicas como obter uma chave (Key) de Google, registrando-nos no site de Google Maps, para poder utilizar os mapas em nosso site.

helldanger1 · Jun 4, 2009

Agora veremos um código para criar um mapa conforme às especificações do Google Maps API 2.

<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
<title>Exemplo de Google Maps API</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=#SUA CHAVE GOOGLE MAPS#" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[

//função para carregar um mapa de Google.
//Esta função é chamada quando a página termina de carregar. Evento onload
function load() {
//comprovamos se o navegador é compatível com os mapas de google
if (GBrowserIsCompatible()) {
//instanciamos um mapa com GMap, passando-lhe uma referência à camada ou <div> onde quisermos mostrar o mapa
var map = new GMap2(document.getElementById("map"));
//centralizamos o mapa em uma latitude e longitude desejadas
map.setCenter(new GLatLng(40.407,-3.68), 5);
//adicionamos controles ao mapa, para interação com o usuário
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl()); ;
}
}

//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 615px; height: 400px"></div>
</body>
</html>

O código está comentado para uma melhor compreensão. Agora, daremos umas explicações adicionais:

Primeiro, embora esteja mais tarde no código, vamos ver o que há no body da página. Há que ver que definimos um evento onload="load()", que serve para chamar à função que gera o mapa, uma vez que tiver terminado de carregar a página.

helldanger1 · Jun 4, 2009

Dentro do corpo da página, observemos na etiqueta div onde se mostrará o mapa:

<div id="map" style="width: 615px; height: 400px"></div>

O tamanho definido com estilos a esta camada é importante, porque será o tamanho de visualização do mapa. O API de Google Maps reconhecerá a largura e altura do container para mostrar um mapa justamente ocupando esse espaço.

Agora observamos o código Javascript.

Primeiro, se inclui a biblioteca onde está o API Javascript para os mapas de Google.

<script src="http://maps.google.com/maps?file=api&v=2&key=#SUA CHAVE GOOGLE MAPS#" type="text/javascript"></script>

Se observarmos, este código necessita que indiquemos nossa própria Key do API de Google Maps, que conseguimos ao nos registrar. Teremos que colocá-la substituindo o texto =#SUA CHAVE GOOGLE MAPS#.

Logo, podemos passar à função que gera o mapa, que se carrega quando termina de se mostrar a página (é chamada pelo evento onload).

Essa função está bastante comentada e além disso, Quero deixar para artigos posteriores diferentes pormenores da geração de mapas, porém é muito importante chamar a atenção sobre um ponto crítico, que me deu um quebra-cabeça quando estava provando os mapas, até que consegui encontrar o erro. Trata-se do método da classe GMap2 setCenter():

setCenter() tem que ser invocado justamente depois de instanciar o mapa!!!

Se tentamos instanciar o mapa e fazer coisas antes de centralizá-lo não funcionará. Isto é algo que está muito claro na documentação do API, porém como é um pouco longa de ler, é fácil de não percebermos .

Em minhas provas me falhou porque tentava colocar um tipo de mapa (vista satélite) e logo o centralizava. O problema é que não sai nenhum erro específico e é muito difícil encontrar o problema.

Mapas de Google API 2

helldanger1

GForum VIP

helldanger1

GForum VIP

helldanger1

GForum VIP