desenvolvimento-com-api-googlemaps

Prévia do material em texto

Manuais e recursos para desenvolvimento web
www.criarweb.com
Desenvolvimento com o API de Google Maps
Autores do manual 
Este manual foi criado pelos seguintes colaboradores de Criarweb.com: 
Javier Chaure
http://www.xski.net 
(2 capítulos)
Miguel Angel Alvarez - 
Tradução de JML 
(20 capítulos)
Desenvolvimento com o API de Google Maps: www.criarweb.com/desenvolvimento-google-maps/ 
© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.
1
http://www.desarrolloweb.com/
http://www.criarweb.com/desenvolvimento-google-maps/
http://www.xski.net/
Manuais e recursos para desenvolvimento web
www.criarweb.com
O básico para começar a desenvolver com Google Maps I
Um dos últimos serviços do gigante Google que mais deu o que falar é Google Maps. Em um 
navegador, e com um simples clique o usuário pode dar a volta virtual pelo mundo, 
desfrutando de fotos aéreas de grande qualidade em algumas zonas, e do mapeamento 
vetorial completo de outras. Porém, o interessante do serviço é que Google oferece uma API 
(Application Programming Interface) para todos aqueles interessados em usar este serviço e 
integra-lo em sua própria página, de forma simples e gratuita. Ao longo deste artigo veremos 
os fundamentos para integrar Google Maps em nosso website e através de um exemplo 
criaremos um primeiro mapa usando as funcionalidades mais básicas da API. 
A característica que sem dúvida mais chama a atenção do funcionamento de Google Maps é a 
sua interatividade. Podemos clicar várias vezes no mapa para nos movermos pelo mundo, dar 
zoom e escolher o tipo do mapa sem necessidade de recarregar a página, tudo isso de forma 
fácil e intuitiva. Este tipo de aplicação web se enquadra dentro da tecnologia que Adaptive Path 
denominou AJAX (Asynchronous Javascript + XML). Não vamos aprofundar neste artigo no 
planejamento AJAX, entretanto, é conveniente fazer um breve comentário para conhecer 
grandes aspectos de seu funcionamento. 
AJAX não é uma nova tecnologia, e sim uma combinação de tecnologias já existentes para 
oferecer uma nova visão na hora de criar aplicações web. Seguindo um planejamento AJAX, 
usaremos CSS e DHTML para a apresentação dos dados, o DOM (Document Object Model) para 
tratar dinamicamente a apresentação destes dados, XML e XSLT para o correto intercâmbio e 
manipulação da informação, XMLHttpRequest para obter a informação de maneira assíncrona 
(quando nos peça o usuário) e Javascript para coordenar a todos estes agentes ao nosso gosto 
dependendo de nossas necessidades. Desta forma, temos um "motor" javascript entre a 
apresentação e o servidor, que nos fará petições de informação de forma assíncrona para 
incorpora-la imediatamente à apresentação de nossa página, sem necessidade de recarregá-la 
e fazer uma nova petição de página completa ao servidor. 
Em suma, esta é a filosofía de funcionamento de AJAX, um planejamento que sem dúvida 
oferece grandes possibilidades, como as que podemos ver na prática com Google Maps. 
Podemos ver outros exemplos de aplicações AJAX em Google Suggest e Gmail. 
Como vimos anteriormente na introdução deste artigo, Google nos permite usar Google Maps 
em nossa página web de forma gratuita. A seguir veremos como temos de proceder para 
realizar nosso primeiro mapa, vendo os fundamentos da API que Google nos oferece. 
Os requisitos para começar a trabalhar são realmente escassos. Com um simples editor de 
html e um servidor público podemos começar a criar mapas em nosso domínio. É importante 
assinalar que o servidor onde hospedarmos nossos scripts para Google Maps há de ser público, 
entre outras razões porque Google monitorizará o uso que fizermos do mapa, de acordo com 
seus termos e condições de uso. 
O primeiro passo para começar a usar Google Maps é obter uma chave (key) que é concedida 
quando fazemos a inscrição no serviço. Esta chave é única para cada usuário de Google Maps e 
é restritiva no que se refere ao seu uso, já que só nos permite usar os scripts em um dos 
diretórios de nosso servidor. 
Uma vez que tivermos nossa chave, já estaremos em condições de criar nosso primeiro mapa: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd"> 
Desenvolvimento com o API de Google Maps: www.criarweb.com/desenvolvimento-google-maps/ 
© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.
2
http://www.desarrolloweb.com/
http://www.criarweb.com/desenvolvimento-google-maps/
http://www.google.com/apis/maps/signup.html
http://www.google.com/apis/maps/terms.html
Manuais e recursos para desenvolvimento web
www.criarweb.com
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> 
 <head> 
 <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
 <title>Introdução a Google Maps - CriarWeb</title> 
 <script src="http://maps.google.com/maps?file=api&v=1&key=ADICIONE_SUA_CHAVE_AQUI" 
type="text/javascript"></script> 
 </head> 
 <body> 
 <div id="map" style="width: 400px; height: 300px"></div> 
 <script type="text/javascript"> 
 var map = new GMap(document.getElementById("map")); 
 map.setMapType(G_SATELLITE_TYPE); 
map.addControl(new GLargeMapControl()); 
 map.addControl(new GMapTypeControl()); 
map.centerAndZoom(new GPoint (-3.688788414001465, 40.41996541363825), 3); 
 </script> 
 </body> 
</html> 
Executando este código em um servidor público obtemos como resultado o seguinte mapa, que 
nos mostra uma vista aérea de Madri centralizada na Puerta de Alcalá: 
Como se pode ver no código, criamos uma única camada com id="map" destinada a conter 
nosso Google Map. O script que vem a seguir da declaração desta camada é o que gera o 
mapa. Vejamos sentença a sentença o que faz o código: 
• var map = new GMap(document.getElementById("map")); 
Esta sentença gera o mapa especificando como destino o id="map" que atribuímos 
Desenvolvimento com o API de Google Maps: www.criarweb.com/desenvolvimento-google-maps/ 
© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.
3
http://www.desarrolloweb.com/
http://www.criarweb.com/desenvolvimento-google-maps/
Manuais e recursos para desenvolvimento web
www.criarweb.com
previamente para nossa camada container. Note que o mapa se adaptará ao tamanho 
que tivermos especificado para esta camada. 
• map.setMapType(G_SATELLITE_TYPE); 
setMapType nos permite especificar o tipo de mapa que queremos visualizar. Como se 
pode ver nos setores situados acima à direita no mapa, podemos escolher entre as 
vistas "Map" (mapa vetorial), "Satellite" (fotografia de satélite) e "Hybrid" (combinam 
ambas vistas). Em nosso caso, já que Google ainda não dispõe de mapas vetoriais para 
Espanha, escolhemos a vista de satélite que nos mostra a fotografia aérea da zona. 
• map.addControl(new GLargeMapControl()); 
map.addControl(new GMapTypeControl()); 
addControl nos permite incorporar elementos de controle ao mapa, tal e como são o 
controle de zoom que vemos à esquerda e o selecionador do tipo de mapa. Dependendo 
de nossas necessidades podemos incorporar estes controles, ou inclusive versões de 
menor tamanho (GSmallMapControl) para mapas em tamanho reduzido. Por padrão, o 
mapa se mostra sem controles. 
• map.centerAndZoom(new GPoint (-3.688788414001465, 40.41996541363825), 3); 
Com esta sentença indicamos ao nosso GMap que lugar queremos que mostre, 
mediante o método centerAndZoom. Os parâmetros são um GPoint (que geramos a 
seguir a partir de sua latitude e longitude) e o nível de zoom que queremos mostrar, de 
1 a 16, sendo o nível 1 o mais próximo e o 16 o mais afastado. 
Google Maps localiza os pontos nos mapas a partir de sua latitude e longitude. Esta 
informação devemos administra-la nós mesmos, e para isso o mais adequado é usar 
algum dos serviços de geocoding disponíveis na rede. Um deles é por exemplo o de 
InfoSports, no qual simplesmente ao clicar em qualquer ponto do mapa obteremosa 
latitude e longitude desejadas para esse ponto. Existem outros serviços de geocoding 
disponíveis de forma gratuita na red que não exigem buscar o ponto físico no mapa, 
tais como Geocoder.us e geonames.org, nos quais podemos realizar buscas a partir do 
nome da localização que buscamos. 
Artigo por Javier Chaure 
O básico para começar a desenvolver com Google Maps II
Como se pode ver no artigo anterior sobre a criação de mapas de Google, criar um mapa e 
centraliza-lo em um ponto é realmente simples. Sofistiquemos um pouco nosso mapa 
adicionando-lhe uns marcadores, de tal forma que possamos localizar determinados pontos de 
interesse no mapa. O mapa com nossos pontos de interesse adicionados ficará da seguinte 
maneira: 
Desenvolvimento com o API de Google Maps: www.criarweb.com/desenvolvimento-google-maps/ 
© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.
4
http://www.desarrolloweb.com/
http://www.criarweb.com/desenvolvimento-google-maps/
http://www.criarweb.com/artigos/basico-comecar-desenvolver-google-maps.html
http://www.infosports.com/m/map.htm
Manuais e recursos para desenvolvimento web
www.criarweb.com
O primeiro que necessitamos são as coordenadas dos novos pontos, neste caso a Plaza de 
Cibeles e a Plaza de Neptuno. A seguir associaremos um marcador a cada um dos pontos e o 
mostraremos no mapa. O código que mostra este segundo mapa é o seguinte: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> 
 <head> 
 <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
 <title>Introdução a Google Maps - Criarweb</title> 
 <script src="http://maps.google.com/maps?file=api&v=1&key= ADICIONE_SUA_SENHA_AQUI" 
type="text/javascript"></script> 
 </head> 
 <body> 
 <div id="map" style="width: 400px; height: 300px"></div> 
 <script type="text/javascript"> 
 var map = new GMap(document.getElementById("map")); 
 map.setMapType(G_SATELLITE_TYPE); 
 map.addControl(new GLargeMapControl()); 
 map.addControl(new GMapTypeControl()); 
 //Puerta de Alcalá 
 var point = new GPoint (-3.688788414001465, 40.41996541363825); 
 var marker = new GMarker(point); 
 map.addOverlay(marker); 
 //Plaza de Neptuno 
 var point = new GPoint (-3.6941099166870117, 40.4154238545226); 
 var marker = new GMarker(point); 
 map.addOverlay(marker); 
 //Plaza de Cibeles 
 var point = new GPoint (-3.693079948425293, 40.41940998761056); 
 var marker = new GMarker(point); 
 map.addOverlay(marker); 
Desenvolvimento com o API de Google Maps: www.criarweb.com/desenvolvimento-google-maps/ 
© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.
5
http://www.desarrolloweb.com/
http://www.criarweb.com/desenvolvimento-google-maps/
Manuais e recursos para desenvolvimento web
www.criarweb.com
 map.centerAndZoom(point, 3); 
 </script> 
 </body> 
</html> 
Como se pode ver, declaramos uma variável point a partir da qual criamos o marcador para 
posteriormente mostrá-lo no mapa com addOverlay. Nesta ocasião centralizamos o mapa no 
último ponto declarado, o correspondente à Plaza de Cibeles. 
Ótimo, já temos um mapa criado com uma série de pontos assinalados sobre ele, porém não 
contribuem com nenhuma informação ao visitante. O apropriado seria satisfazer a curiosidade 
do usuário proporcionando-lhe algo de informação associada a esse ponto. Adicionamos então, 
algo mais de informação a nossos marcadores mostrando umas janelas informativas que nos 
indiquem o nome da localização física sobre a que nos encontramos: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> 
 <head> 
 <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
 <title>Introdução a Google Maps - Criarweb</title> 
 <script src="http://maps.google.com/maps?file=api&v=1&key= ADICIONE_SUA_SENHA_AQUI" 
type="text/javascript"></script> 
 </head> 
 <body> 
 <div id="map" style="width: 400px; height: 300px"></div> 
 <script type="text/javascript"> 
 var map = new GMap(document.getElementById("map")); 
 map.setMapType(G_SATELLITE_TYPE); 
 map.addControl(new GLargeMapControl()); 
 map.addControl(new GMapTypeControl()); 
 function createMarker(point, nombre) { 
 var marker = new GMarker(point); 
 GEvent.addListener(marker, 'click', function() { 
 marker.openInfoWindowHtml(nome); 
 }); 
 return marker; 
 } 
 //Puerta de Alcalá 
 var point = new GPoint (-3.688788414001465, 40.41996541363825); 
 var nombre = "Puerta de Alcalá"; 
 var marker = createMarker (point, nome); 
 map.addOverlay(marker); 
 //Plaza de Neptuno 
 var point = new GPoint (-3.6941099166870117, 40.4154238545226); 
 var nombre = "Plaza de Neptuno" 
 var marker = createMarker (point, nome); 
 map.addOverlay(marker); 
 //Plaza de Cibeles 
 var point = new GPoint (-3.693079948425293, 40.41940998761056); 
 var nombre = "Plaza de Cibeles" 
 var marker = createMarker (point, nome); 
 map.addOverlay(marker); 
 map.centerAndZoom(point, 3); 
Desenvolvimento com o API de Google Maps: www.criarweb.com/desenvolvimento-google-maps/ 
© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.
6
http://www.desarrolloweb.com/
http://www.criarweb.com/desenvolvimento-google-maps/
Manuais e recursos para desenvolvimento web
www.criarweb.com
 </script> 
 </body> 
</html> 
Este código nos gera o seguinte mapa, no qual ao clicar sobre o ponto da Plaza de Cibeles… 
Efetivamente, mostra-se a janela informativa com os dados associados a esse ponto. Neste 
exemplo, criamos uma função que nos cria os markers e seus correspondentes infoWindows 
para economizar algo de código. Esta pequena função recebe como parâmetros o GPoint onde 
queremos localizar o marker, e um parâmetro "nome" que contém a informação que queremos 
mostrar na janela informativa associada. 
Há que resenhar que para associar o aparecimento da janela com o clique do usuário sobre 
nosso ponto temos que associar tal evento, que é o que se faz na sentença: 
GEvent.addListener(marker, 'click', function() { 
 marker.openInfoWindowHtml(nome); 
}); 
Desta maneira cada vez que se clica sobre o marker mostra-se na infoWindow a informação 
especificada no parâmetro "nome". Observe que usamos openInfoWindowHtml, que toma seu 
parâmetro como código html, de modo que poderíamos incluir uma construção ao conteúdo de 
nossa nova infoWindow. 
Ao longo deste artigo, vimos as funções mais básicas de Google Maps, que proporcionam as 
ferramentas mais rudimentares para manejar o serviço. Apesar de não haver aprofundado 
sobre a verdadeira potencialidade do serviço, residente no uso de XML, com o aqui aprendido 
temos já a bagagem necessária para começar a aprofundar na API de Google Maps e começar 
a criar scripts mais avançados. 
Nota: Vimos aqui explicado o API 1 de Google Maps. Agora estes códigos devem ser atualizados seguindo 
o API 2 de Google Maps. Para isso, podemos consultar o artigo Mapas de Google API 2. 
Desenvolvimento com o API de Google Maps: www.criarweb.com/desenvolvimento-google-maps/ 
© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.
7
http://www.desarrolloweb.com/
http://www.criarweb.com/desenvolvimento-google-maps/
http://www.criarweb.com/artigos/mapas-google-api2.html
Manuais e recursos para desenvolvimento web
www.criarweb.com
Artigo por Javier Chaure 
Mapas de Google API 2
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é poderemossaber 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, pois em CriarWeb.com 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. 
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()); ;
 }
 }
 
 //]]>
Desenvolvimento com o API de Google Maps: www.criarweb.com/desenvolvimento-google-maps/ 
© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.
8
http://www.desarrolloweb.com/
http://www.criarweb.com/desenvolvimento-google-maps/
http://www.google.com/apis/maps/signup.html
http://www.criarweb.com/artigos/basico-para-desenvolver-google-maps-ii.html
http://www.criarweb.com/artigos/basico-comecar-desenvolver-google-maps.html
http://maps.google.com/
Manuais e recursos para desenvolvimento web
www.criarweb.com
 </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. 
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. 
Artigo por Miguel Angel Alvarez - Tradução de JML 
Desenvolvimento com o API de Google Maps: www.criarweb.com/desenvolvimento-google-maps/ 
© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.
9
http://www.desarrolloweb.com/
http://www.criarweb.com/desenvolvimento-google-maps/
Manuais e recursos para desenvolvimento web
www.criarweb.com
Tipos de mapa en Google Maps
Ao desenvolver com Google Maps podemos escolher o tipo de mapa que os usuários verão, 
entre as diferentes vistas pré-definidas como são a vista satélite, vista de ruas o vista híbrida 
(satélite e ruas em modo semi-transparente. 
Para definir o tipo de mapa em um mapa de Google temos o método setMapType() da classe 
GMap2. O método setMapType() recebe o tipo de mapa que se deseja ver. À princípio existem 
os seguintes tipos de mapa: 
G_NORMAL_MAP 
É para um mapa normal, que é o mapa político, com os nomes de localizações. Este mapa é o 
definido por padrão. À princípio, aparecem os diferentes países, porém se ampliarmos veremos 
as cidades importantes, estradas, etc e se dermos mais zoom sobre um povoado veremos os 
nomes das ruas, praças, bairros, etc. 
G_SATELLITE_MAP 
Este mapa permite ver o mundo com imagens tomadas por satélite. 
G_HYBRID_MAP 
Este mapa combina a vista satélite e a vista normal. Sobre as fotos satélite se pintam em cima 
as diferentes localizações, ruas, etc. 
Vejamos um mapa de Google no qual definimos o tipo de mapa. Mostramos uma vista satélite 
neste caso. 
<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=AQUI-SUA-CHAVE" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
//função para carregar um mapa de Google. 
//Será chamada quando a página tiver terminado de carregar. Evento onload
function load() {
 //comprovamos se o navegador for compatível com os mapas de google
 if (GBrowserIsCompatible()) {
 //instanciamos um mapa com GMap, passando 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(41.375987390149106, 2.1778035163879395), 17); 
 map.setMapType(G_SATELLITE_MAP);
 }
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 615px; height: 400px"></div>
</body>
</html> 
Com este código teremos uma vista satélite de Barcelona centralizada na praça onde está a 
estátua de Colombo assinalando com o dedo. Duas coisas que há que ver: 
• Na linha que carrega o API de Google Maps temos que substituir "AQUI-SUA-CHAVE" 
Desenvolvimento com o API de Google Maps: www.criarweb.com/desenvolvimento-google-maps/ 
© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.
10
http://www.desarrolloweb.com/
http://www.criarweb.com/desenvolvimento-google-maps/Manuais e recursos para desenvolvimento web
www.criarweb.com
pela chave de usuário do API proporcionada em Google ao nos registrar para usar seus 
mapas em nosso web site. http://maps.google.com/maps?file=api&v=2&key=AQUI-
SUA-CHAVE 
• A linha map.setMapType(G_SATELLITE_MAP); é onde carregamos o tipo de vista. 
Nota: Existem outros artigos anteriores onde explicamos temas adicionais dos mapas de Google que você 
deveria conhecer para entender este código.: Google Maps API 2 
Agora, se desejarmos um mapa híbrido, só teremos que mudar a linha: 
map.setMapType(G_SATELLITE_MAP); 
Por esta outra linha, onde especificamos outro tipo de mapa: 
map.setMapType(G_HYBRID_MAP); 
Também podemos provar tirar essa linha onde especificamos o tipo de mapa. Veremos como 
sai então o mapa de ruas. É o mesmo que se especificássemos o tipo de mapa normal. 
map.setMapType(G_NORMAL_MAP); 
Artigo por Miguel Angel Alvarez - Tradução de JML 
Controle para mudar o tipo de mapa de Google
Podem-se incluir vários controles interativos nos mapas de Google, por exemplo, para fazer 
zoom sobre o mapa ou para alternar entre diferentes tipos de mapa. 
Veremos agora como fazer um mapa colocando um controle com três botões, os quais 
clicando, o usuário pode selecionar o tipo de vista que deseja. 
Isto se faz com o método addControl da classe GMap2, passando por parâmetro uma instância 
do tipo de controle que se deseja incluir. Teríamos que colocar esta linha no código, depois de 
centralizar o mapa na posição desejada. 
map.addControl(new GMapTypeControl()); 
Vejamos o código completo de um mapa que tem o controle para mudar o tipo de vista. O 
mapa estará centralizado em Peñíscola, província de Castellón, onde o Papa Luna tinha a sede. 
<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=AQUI-SUA-CHAVE" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
 if (GBrowserIsCompatible()) {
 var map = new GMap2(document.getElementById("map")); 
 map.setCenter(new GLatLng(40.35868573007256, 0.4062795639038086), 16); 
Desenvolvimento com o API de Google Maps: www.criarweb.com/desenvolvimento-google-maps/ 
© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.
11
http://www.desarrolloweb.com/
http://www.criarweb.com/desenvolvimento-google-maps/
http://www.criarweb.com/artigos/mapas-google-api2.html
Manuais e recursos para desenvolvimento web
www.criarweb.com
 map.addControl(new GMapTypeControl());
 map.setMapType(G_SATELLITE_MAP);
 }
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 615px; height: 400px"></div>
</body>
</html> 
Artigo por Miguel Angel Alvarez - Tradução de JML 
Controles em mapas de Google
Como já devemos de saber, os mapas de Google podem ser integrados na página de qualquer 
pessoa que deseje, através de um API em Javascript. Neste caso vamos ver como incluir 
controles de usuário dentro de um mapa de Google, como funciona o API neste sentido e que 
tipos de controles existem disponíveis. 
Primeiramente vale dizer que este artigo vem a ampliar a informação do manual 
Desenvolvimento com o API de Google Maps, portanto, muitas das explicações para trabalhar 
com os mapas de Google tem de ser consultadas em outros capítulos do mencionado manual. 
Tipos de controles de usuário 
Os controles de usuário dos mapas de Google (controls em inglês) são interfaces desde onde o 
usuário pode interagir com o mapa, para efetuar ações como por exemplo, fazer zoom, 
selecionar entre tipos de mapa (satélite, mapa, híbrido), ou se mover por um mapa pequeno 
mais geral. Todos estes controles estão já criados e existem instruções e classes para incluí-los 
facilmente em um mapa de Google. 
Embora qualquer desenvolvedor possa criar seus próprios controles, existem vários tipos de 
controles de usuário nos mapas de Google já criados de antemão: 
• GLargeMapControl: Mostra uma interface para fazer zoom e mover-se pelo mapa, com 
uma espécie de regra onde se pode escolher as diferentes aproximações da vista. Este 
controle aparece na parte superior esquerda. 
• GSmallMapControl: É outro controle de usuário para fazer zoom e mover-se pelo mapa, 
porém menor, que também aparece na esquina superior esquerda. 
• GSmallZoomControl: Um controle de usuário muito pequeno, que aparece na esquina 
superior esquerda que simplesmente tem um botão para ampliar o zoom e outro botão 
para reduzi-lo. Porém, não tem botões para mover-se pelo mapa. 
• GScaleControl: Este é um controle que simplesmente informa sobre a escala atual do 
mapa. Com este controle não se pode interagir, é meramente informativo. 
• GMapTypeControl: Este controle inclui três botões para mudar entre diferentes tipos de 
mapa (mapa político de ruas e estradas, mapa satélite e mapa híbrido -ruas e estradas 
sobre o fundo de satélite) 
• GOverviewMapControl: Com este controle aparece um pequeno mapa na esquina 
inferior direita onde aparece uma vista geral com menos zoom do mapa atual, a através 
do qual também podemos nos mover. 
Desenvolvimento com o API de Google Maps: www.criarweb.com/desenvolvimento-google-maps/ 
© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.
12
http://www.desarrolloweb.com/
http://www.criarweb.com/desenvolvimento-google-maps/
http://www.criarweb.com/desenvolvimento-google-maps/
Manuais e recursos para desenvolvimento web
www.criarweb.com
Adicionar controles a um mapa de Google 
Os controles de usuário para os mapas de Google que vimos se incluem com uma simples 
instrução Javascript na hora de criar o mapa. Como os controles já estão pré-definidos no API 
de Google Maps, simplesmente temos que associá-los ao mapa que estamos criando. 
Para isso se utiliza um método da classe GMap2 chamado addControl(). A classe GMap2 é a 
que se utiliza para instanciar um mapa de google. Com ela criamos o objeto mapa e logo a 
este objeto com addControl() lhe associamos os controles desejados. O método addControl() 
recebe uma instancia do controle de usuário que se deseja criar. 
Por exemplo, se temos o mapa em um objeto chamado "map", executaremos o método 
addControl() desta maneira: 
map.addControl(new GMapTypeControl()); 
Podemos incluir todos os controles que desejarmos fazendo várias chamadas ao método 
addControl(), passando como parâmetro distintas instancias dos controls que queremos incluir. 
Vejamos um exemplo completo de um mapa de Google que tem uma série de controles de 
usuário: 
<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&keyAQUI-SUA-CHAVE-DO-API" 
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
 if (GBrowserIsCompatible()) {
 var map = new GMap2(document.getElementById("map")); 
 map.setCenter(new GLatLng(40.35868573007256, 0.4062795639038086), 12); 
 map.addControl(new GMapTypeControl());
 map.addControl(new GSmallZoomControl());
 map.addControl(new GScaleControl());
 map.addControl(new GOverviewMapControl());
 map.setMapType(G_SATELLITE_MAP);
 }
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 615px; height: 400px"></div>
</body>
</html> 
Como havíamos dito antes, o desenvolvedor pode criar seus próprios controles para incluí-los 
em seus mapas. Este é um tema que trataremos mais adiante, porém agora podemos referir à 
documentação do API Google Maps para obter mais informação: 
http://www.google.com/apis/maps/documentation/controls.html 
Artigo por Miguel Angel Alvarez - Tradução de JML 
Desenvolvimento com o API de Google Maps: www.criarweb.com/desenvolvimento-google-maps/ 
© Os manuais de CriarWeb.com têm copyrightdos autores. Não reproduzir sem autorização.
13
http://www.desarrolloweb.com/
http://www.criarweb.com/desenvolvimento-google-maps/
http://www.google.com/apis/maps/documentation/controls.html
Manuais e recursos para desenvolvimento web
www.criarweb.com
Incluir um mapa de tipo físico
Neste artigo vamos mostrar como trabalhar com um tipo de mapa de Google especial, 
apresentado há pouco tempo no sistema de Google Maps. Trata-se do mapa físico, que mostra 
a terra com um desenho de sua superfície que representa as montanhas, rios e outros 
acidentes geográficos. 
O mapa físico foi apresentado há relativamente pouco tempo. Pelo menos quando iniciamos 
este manual do API de Google Maps não existia. Portanto, nos artigos publicados 
anteriormente não havíamos falado da possibilidade de integrar um mapa físico. Veremos isso 
agora. 
No controle de seleção de tipo de mapa não aparece por padrão o tipo de mapa físico, com o 
que não se pode selecionar pelo usuário, a não ser que nós façamos algo para habilitá-lo. Os 
tipos de mapas disponíveis para o usuário por padrão na hora de trabalhar com Google Maps 
são os que havíamos visto anteriormente: 
• G_NORMAL_MAP: é um mapa político, de países, cidades com suas ruas, etc. 
• G_SATELLITE_MAP: mapa de imagens de satélite. 
• G_HYBRID_MAP: Um mapa que superpõe a vista de ruas em cima da vista satélite. 
Por isso, quando colocamos o controle para mudar o tipo de mapa, nos aparecem três botões, 
para mudar entre qualquer destes tipos de mapas. 
Pois bem, nós podemos aumentar a disponibilidade de tipos de mapas de Google, para incluir 
novos mapas, como o mapa físico (G_PHYSICAL_MAP), outros mapas existentes, qualquer que 
possam fazer no futuro, ou inclusive mapas criados por nós mesmos. 
Para indicar o tipo de mapa que desejamos que se mostre se faz da seguinte maneira: 
map.setMapType(G_PHYSICAL_MAP); 
Definir os tipos de mapa do controle de seleção de tipos de mapa 
Agora, para incluir outros tipos de mapas no controle de seleção de tipo de mapa, devemos 
utilizar o método addMapType() da classe GMap2, indicando como parâmetro o nome do tipo 
de mapa que queremos incluir. Por exemplo: 
map.addMapType(G_PHYSICAL_MAP); 
Isto parece que não é um passo obrigatório para poder mostrar um tipo de mapa, e sim para 
que apareça no controle e o usuário possa selecioná-lo. Ou seja, para fazer um mapa de 
Google físico com map.setMapType(G_PHYSICAL_MAP) não é necessário que tê-lo incluído 
previamente com map.addMapType(G_PHYSICAL_MAP); 
Agora, para tirar um tipo de mapa do controle, fazemos através do método removeMapType() 
da classe GMap2, indicando um parâmetro com o nome do tipo de mapa que queremos 
desabilitar do controle. Por exemplo: 
map.removeMapType(G_HYBRID_MAP); 
Exemplo de mapa de Google com desenho tipo físico 
Desenvolvimento com o API de Google Maps: www.criarweb.com/desenvolvimento-google-maps/ 
© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.
14
http://www.desarrolloweb.com/
http://www.criarweb.com/desenvolvimento-google-maps/
http://www.criarweb.com/artigos/controle-para-mudar-tipo-mapa-google.html
http://www.criarweb.com/artigos/controle-para-mudar-tipo-mapa-google.html
http://www.criarweb.com/desenvolvimento-google-maps/
Manuais e recursos para desenvolvimento web
www.criarweb.com
Para acabar vou mostrar como criar um mapa de Google físico, que ademais tenha um controle 
que permita mudar entre os tipos de mapa político, satélite e físico. 
function load() {
 if (GBrowserIsCompatible()) {
 var map = new GMap2(document.getElementById("map")); 
 map.setCenter(new GLatLng(40.201022,-3.8736677),6);
 map.addMapType(G_PHYSICAL_MAP);
 map.removeMapType(G_HYBRID_MAP);
 map.addControl(new GMapTypeControl());
 map.setMapType(G_PHYSICAL_MAP);
 }
} 
O código que podemos ver inclui chamadas aos métodos: addMapType(G_PHYSICAL_MAP), 
para indicar que no controle de seleção de tipo de mapa se deve incluir o mapa físico. 
map.removeMapType(G_HYBRID_MAP), para eliminar do controle de seleção de tipos de 
mapas o mapa híbrido. O método addControl(new GmapTypeControl()) para incluir na interface 
o controle de usuário para mudar o tipo de mapa. E por último 
setMapType(G_PHYSICAL_MAP), para definir que o mapa que se deve mostrar desde o 
princípio deve ser o mapa físico. 
Podemos ver o exemplo em funcionamento em uma página a parte. 
Pode-se ver o código fonte da página para ver o código do exemplo completo. 
Artigo por Miguel Angel Alvarez - Tradução de JML 
Inserir uma marca em um mapa de Google
Vejamos rapidamente como inserir uma marca em um mapa de Google, que nos serve para 
assinalar um ponto preciso em um mapa. É um passo muito simples, porém muito importante 
no manejo do API de Google Maps. 
Este artigo está englobado dentro do manual de manejo do API dos mapas de Google, por isso 
saltaremos algumas explicações porque já foram apresentadas em artigos anteriores. 
Para inserir marcas temos um método, também da classe GMap2, que serve para inserir um 
elemento sobre o mapa. O método em concreto se chama addOverlay() e recebe como 
parâmetro a marca que se quer inserir. 
map.addOverlay(marker); 
No código anterior o objeto map seria uma instancia da classe GMap2. A variável marker 
conterá a marca que se quer inserir no mapa. 
Agora vejamos como criar a marca. Explicaremos em dois passos: 
1) Criamos um ponto 
A marca deve se situar em um ponto concreto do mapa, que se define por uma longitude e 
uma latitude (coordenadas x, y no plano terrestre). Para criar um ponto tem que se utilizar a 
Desenvolvimento com o API de Google Maps: www.criarweb.com/desenvolvimento-google-maps/ 
© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.
15
http://www.desarrolloweb.com/
http://www.criarweb.com/desenvolvimento-google-maps/
http://www.criarweb.com/desenvolvimento-google-maps/
http://www.guiarte.com/mapas-google/desarrolloweb/mapa-fisico.php
Manuais e recursos para desenvolvimento web
www.criarweb.com
classe GPoint, que recebe no construtor a longitude e latitude desse ponto. 
var point = new GPoint (-3.7034815549850464, 40.41689826118782); 
2) Criamos a marca 
Para criar a marca simplesmente utilizamos a classe GMarker, que em seu construtor deve 
receber vários valores. Por enquanto colocaremos somente o único valor que é obrigado 
indicar, que é o ponto sobre o que colocar a marca, criado no passo anterior. 
var marker = new GMarker(point); 
Exemplo completo 
Isso é tudo que necessitamos saber por enquanto. Embora logo veremos outro detalhes 
interessantes que se podem personalizar nas marcas. 
Vejamos o código completo de um mapa de Google com uma marca na praça "Puerta del Sol" 
de Madri. 
<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=AQUI-SUA-CHAVE-GOOGLE-MAPS" 
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
 if (GBrowserIsCompatible()) {
 var map = new GMap2(document.getElementById("map")); 
 map.setCenter(new GLatLng(40.41689826118782,-3.7034815549850464), 17); 
 map.addControl(new GLargeMapControl());
 map.setMapType(G_SATELLITE_MAP);
 
 var point = new GPoint (-3.7034815549850464, 40.41689826118782);
 var marker = new GMarker(point);
 map.addOverlay(marker); 
 }
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 615px; height: 400px"></div>
</body>
</html> 
Mudar o ícone a uma marca 
A marca se cria com um ícone padrão, como uma espécie de tachinha vermelha, porém 
podemos mudá-la para personalizar o estilo de nossos mapas. 
Vamos ver aqui como associar um ícone a uma marca, quando a instanciamos a partir de seu 
construtor. 
O construtor da marca recebe dois parâmetros, o primeiro obrigado é o ponto geográfico e o 
outroé o ícone, que é opcional. No caso em que não se especifique um ícone se utiliza o 
G_DEFAULT_ICON, que é uma constante do API que contém o ícone padrão. 
Desenvolvimento com o API de Google Maps: www.criarweb.com/desenvolvimento-google-maps/ 
© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.
16
http://www.desarrolloweb.com/
http://www.criarweb.com/desenvolvimento-google-maps/
Manuais e recursos para desenvolvimento web
www.criarweb.com
var marker = new GMarker(point, meuIcone); 
a variável meuIcone neste caso é um objeto da classe GIcon, que pode criar assim: 
var meuIcone = new GIcon(G_DEFAULT_ICON);
meuIcone.image = "http://www.meudominio.org/mapas-google/arrow_down.png"; 
Neste caso, com a primeira instrução se cria um novo ícone, a partir de G_DEFAULT_ICON. Ou 
seja, um ícone novo, porém com todas as características carregadas do G_DEFAULT_ICON. 
Na seguinte linha se modifica a imagem do ícone, atribuindo um novo valor a seu atributo 
image. 
Teríamos que falar mais sobre a criação e modificação de ícones, porque é um tema que 
requer maior detalhamento para dominá-lo, porém deixaremos para mais adiante. 
Artigo por Miguel Angel Alvarez - Tradução de JML 
Eventos em mapas de Google
Para continuar o manual de desenvolvimento de mapas de Google, vamos conhecer o 
tratamento de eventos. O API de Google Maps tem capacidade para tratar eventos. Isto não é 
nada novo, porque Javascript também é uma linguagem de programação orientada a eventos e 
o API dos mapas de Google está baseado em Javascript. 
Porém, há que assinalar que o API de Google Maps incorpora vários eventos que são próprios 
dos mapas de Google e que não fazem parte dos eventos básicos de Javascript. Ademais, 
assim como as peculiaridades de cada navegador podem fazer o tratamento de eventos 
distinto entre diferentes plataformas, o API dos mapas de Google é único e funciona em 
qualquer navegador da mesma maneira, ou seja, é o que chamamos cross-browser. 
Os eventos no API se manejam usando funções que se chamam escutadores de eventos, que 
se têm que registrar dentro do espaço de nomes de GEvent. Cada objeto do API dos mapas de 
google dispõe de uma série de eventos já definidos, que ademais se executa dentro de um 
contexto e passam distintos parâmetros para identificar tal contexto. Por exemplo, um mapa 
de Google tem o evento click (a classe GMap2 tem uma infinidade de eventos diferentes), que 
se desata quando o usuário clica sobre o mapa. Tal evento passa os argumentos overlay e 
point, o primeiro para passar uma marca (se é que o usuário clicou em uma marca) e o 
segundo para passar o ponto geográfico onde se fez o clique, se clicou sobre qualquer área 
vazia do mapa. 
Todos os eventos que suporta o API de Google Maps, para cada classe, estão perfeitamente 
documentados na referência que oferece Google. 
Obter o ponto onde clicou o usuário 
Vamos mostrar um primeiro exemplo de tratamento de eventos, muito simples, para extrair o 
ponto onde o usuário clicou no mapa. 
Primeiro, teríamos que criar o mapa, tal como fizemos em anteriores ocasiões, e adicionar-lhe 
a GEvent um escutador de eventos (Event listener) para quando se clique sobre o mapa. 
var map = new GMap2(document.getElementById("map")); 
map.setCenter(new GLatLng(33,0),3); 
Desenvolvimento com o API de Google Maps: www.criarweb.com/desenvolvimento-google-maps/ 
© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.
17
http://www.desarrolloweb.com/
http://www.criarweb.com/desenvolvimento-google-maps/
http://code.google.com/apis/maps/documentation/reference.html
http://www.criarweb.com/desenvolvimento-google-maps/
Manuais e recursos para desenvolvimento web
www.criarweb.com
map.addControl(new GLargeMapControl());
map.setMapType(G_NORMAL_MAP); 
GEvent.addListener(map, "click", tratamento_clique); 
A linha que temos que ver agora é a última, onde se adiciona o escutador de eventos. 
GEvent é a classe que adicionamos o event listener. Ao adicionar um evento para ser escutado 
temos que prover de três parâmetros: 
1. O objeto do API sobre o qual se tem que escutar o evento 
2. O nome do evento que queremos detectar e fazer ações quando tiver captado 
3. O nome da função que se encarregará de tratar o evento. 
Neste caso se adicionou um escutador de evento, para realizar ações quando se "clica" sobre o 
objeto map, que é o próprio mapa de google. As ações são simplesmente executar a função 
tratamento_clique (observe que só colocamos o nome da função, sem os parênteses). Agora 
temos que codificar o comportamento de nosso mapa quando se clica nele, ou seja, codificar a 
função tratamento_clique(). 
function tratamento_clique(overlay,point){
 alert ("Olá amigo! Vejo que está aí porque fez um clique!");
 alert ("O ponto onde você clicou é: " + point.toString());
} 
Como vemos, a função recebe um par de parâmetros, que são o contexto no qual se detectou 
o evento. Estes dois parâmetros são: 
• overlay: Não vamos utilizá-lo agora. Tem que ver quando o usuário clica em uma 
marca de um mapa. 
• point: que é o ponto ou as coordenadas geográficas onde o usuário fez o clique. 
O código da função é simplesmente um par de alert, para mostrar mensagens ao usuário. O 
primeiro alert simplesmente está para dar uma saudação ao visitante e o segundo mostra as 
coordenadas (x e y - latitude, longitude) onde se fez o clique. Tais coordenadas se extraem do 
parâmetro point que recebemos como contexto do evento, ao que passamos o método 
toString() para que extraia sua codificação em cadeia de caracteres. 
Pode-se ver o exemplo em funcionamento em uma página a parte. 
Artigo por Miguel Angel Alvarez - Tradução de JML 
Manejar um evento em um mapa de Google para reposicionar uma marca
No anterior capítulo do manual de desenvolvimento com o API de mapas de Google vimos os 
primeiros detalhes sobre o tratamento de eventos. Agora vamos continuar com outro exemplo 
de desenvolvimento no qual vamos fazer um mapa que tem uma marca. Clicando em qualquer 
parte do mapa reposicionaremos a marca à posição onde se clicou. 
O evento que veremos é o click no objeto map, da classe GMap2. Neste caso, recuperaremos o 
ponto onde se clicou para colocar a marca nesse ponto. 
Primeiro, vejamos o código para criar o mapa com uma marca: 
var map = new GMap2(document.getElementById("map")); 
map.setCenter(new GLatLng(40,-4),3); 
map.addControl(new GLargeMapControl());
Desenvolvimento com o API de Google Maps: www.criarweb.com/desenvolvimento-google-maps/ 
© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.
18
http://www.desarrolloweb.com/
http://www.criarweb.com/desenvolvimento-google-maps/
http://www.criarweb.com/desenvolvimento-google-maps/
http://www.guiarte.com/mapas-google/desarrolloweb/ej_eventos.php
Manuais e recursos para desenvolvimento web
www.criarweb.com
map.setMapType(G_NORMAL_MAP); 
var point = new GPoint (-4,40);
var marker = new GMarker(point); 
map.addOverlay(marker); 
Este mapa, centralizado na Espanha, tem uma marca também na Espanha. Agora vejamos o 
simples código para detectar um evento de tipo click sobre o mapa: 
GEvent.addListener(map, "click", function (overlay,point){
 if (point){
 marker.setPoint(point); 
 }
}); 
Cria-se o escutador de eventos, para o objeto map e o tipo de evento click, executando uma 
função que recebe dois parâmetros (overlay,point). Lembramos que overlay é a marca sobre a 
que se clicou, se é que se clicou em uma marca, e point é o ponto do mapa onde se clicou, se 
é que se clicou sobre uma área vazia do mapa. 
Na função começamos com um if(point) que serve para saber se recebemos um ponto (Só 
recebemos o ponto se se clicou sobre uma área vazia do mapa), porque só então queremos 
recolocar a marca. Então, chamamos ao método da marca setPoint(point) para reposicionar a 
marca ao ponto recebido por parâmetro. 
É bem simples, não é? Podemos ver o exemplo em funcionamento neste link.Para acabar, deixo aqui o código completo deste exercício: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
<title>Mapa de Google</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=chave"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
 if (GBrowserIsCompatible()) {
 var map = new GMap2(document.getElementById("map")); 
 map.setCenter(new GLatLng(40,-4),3); 
 map.addControl(new GLargeMapControl());
 map.setMapType(G_NORMAL_MAP); 
 
 var point = new GPoint (-4,40);
 var marker = new GMarker(point); 
 map.addOverlay(marker); 
 
 GEvent.addListener(map, "click", function (overlay,point){
 if (point){
 marker.setPoint(point); 
 }
 });
 }
}
window.onload=load
//]]>
Desenvolvimento com o API de Google Maps: www.criarweb.com/desenvolvimento-google-maps/ 
© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.
19
http://www.desarrolloweb.com/
http://www.criarweb.com/desenvolvimento-google-maps/
http://www.guiarte.com/mapas-google/desarrolloweb/ej_eventos2.php
Manuais e recursos para desenvolvimento web
www.criarweb.com
</script>
</head>
<body>
 <div id="map" style="width: 765px; height: 388px"></div>
 
</body>
</html> 
Artigo por Miguel Angel Alvarez - Tradução de JML 
Mostrar a posição de uma marca de Google Maps em um formulário
Agora vamos complicar um pouco o exemplo anterior de recolocar uma marca em um mapa de 
Google, para colocar em um formulário na própria página os valores de latitude e longitude. 
Isto pode nos servir para saber o ponto exato onde se clica, para poder obter a latitude e 
longitude de qualquer ponto geográfico. 
No exemplo vamos ter o mapa de Google e um formulário. O mapa de google, assim como o 
tratamento do evento com o API de Google Maps já o vimos no capítulo anterior, portanto não 
será explicado novamente. 
Veremos então os novos elementos neste exercício. Primeiro o formulário: 
<form action="#" id="posicao" name="posicao">
X: <input type="text" name="x" value="" />
<br />
Y: <input type="text" name="y" value="" />
</form> 
Vemos o formulário, que é como qualquer um que tivermos utilizado em HTML, ao qual lhe 
colocamos um name="posicao", para poder nos referirmos a ele através de Javascript. Logo, 
vemos os campos X e Y, que são campos de texto normais, com seus respectivos name, para 
poder atualizar seus valores desde o script. 
Agora a única mudança que incorporamos no código de criação do mapa de Google, é o 
manejo do evento clique sobre o mapa. 
GEvent.addListener(map, "click", function (overlay,point){
if (point){
 marker.setPoint(point);
 document.posicion.x.value=point.x
 document.posicion.y.value=point.y
 }
}); 
Simplesmente, incluímos um par de linhas adicionais para acessar ao formulário e atualizar os 
valores dos campos <input> das coordenadas. 
Isso é tudo. Podemos ver o exemplo em funcionamento em este link 
O código completo do exercício é este: 
Desenvolvimento com o API de Google Maps: www.criarweb.com/desenvolvimento-google-maps/ 
© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.
20
http://www.desarrolloweb.com/
http://www.criarweb.com/desenvolvimento-google-maps/
http://www.guiarte.com/mapas-google/desarrolloweb/ej_eventos3.php
http://www.criarweb.com/artigos/manejar-evento-mapa-google-para-reposicionar-marca.html
http://www.criarweb.com/artigos/manejar-evento-mapa-google-para-reposicionar-marca.html
http://www.criarweb.com/artigos/manejar-evento-mapa-google-para-reposicionar-marca.html
Manuais e recursos para desenvolvimento web
www.criarweb.com
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
<title>Mapa de Google</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=TU-GOOGLE-MAPS-KEY"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
 if (GBrowserIsCompatible()) {
 var map = new GMap2(document.getElementById("map")); 
 map.setCenter(new GLatLng(40,-4),3); 
 map.addControl(new GLargeMapControl());
 map.setMapType(G_NORMAL_MAP); 
 
 var point = new GPoint (-4,40);
 var marker = new GMarker(point); 
 map.addOverlay(marker); 
 
 GEvent.addListener(map, "click", function (overlay,point){
 if (point){
 marker.setPoint(point);
 document.posicao.x.value=point.x
 document.posicao.y.value=point.y
 }
 });
 }
}
window.onload=load
//]]>
</script>
</head>
<body>
 <div id="map" style="width: 765px; height: 278px"></div>
 <div id="formulario" style="margin: 10px">
 <form action="#" id="posicion" name="posicao">
 X: <input type="text" name="x" value="" />
 <br />
 Y: <input type="text" name="y" value="" />
 </form>
 </div>
 <br />
<br />
Por <a href="http://www.guiarte.com">guiarte.com</a>
</body>
</html> 
Artigo por Miguel Angel Alvarez - Tradução de JML 
Averiguar o zoom em um mapa de Google Maps
Quando geramos um mapa de Google, utilizando o API dos Google Maps, definimos o zoom 
com o qual tem que começar o mapa. Esta é uma tarefa que repetimos numerosas vezes ao 
longo do Manual de API de Google Maps. Porém, o mapa é interativo e o usuário ao utilizá-lo 
Desenvolvimento com o API de Google Maps: www.criarweb.com/desenvolvimento-google-maps/ 
© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.
21
http://www.desarrolloweb.com/
http://www.criarweb.com/desenvolvimento-google-maps/
http://www.criarweb.com/desenvolvimento-google-maps/
Manuais e recursos para desenvolvimento web
www.criarweb.com
pode mudar o zoom, para ampliar ou reduzir a definição. Neste artigo vamos aprender a obter 
o zoom atual de um mapa quando se produza um evento, ou seja, como resposta a uma ação 
de um usuário. Os eventos em mapas de Google já foram tratados anteriormente neste 
manual, de fato, este artigo irá ampliar outro que já havíamos realizado: Mostrar a posição de 
uma marca de Google Maps em um formulário. Neste caso mostraremos o zoom atual do mapa 
de google ao clicar o usuário no mapa e o escreveremos em um formulário na própria página. 
Na verdade, saber o zoom em um mapa é simples, só temos que utilizar o método getZoom() 
da classe GMap2. getZoom() devolve um número inteiro, que é o zoom atual do mapa. 
Coloquemos que temos o objeto mapa em uma variável chamada "map". Sendo assim, 
executaremos o método com isto: 
zoom_atual = map.getZoom(); 
Assim, teríamos salvo em uma variável zoom_atual o valor inteiro do zoom do mapa. 
Se quisermos mostrar em um formulário na página o zoom atual, como resposta ao evento 
clique, faremos algo como isto: 
GEvent.addListener(map, "click", function (overlay,point){
 if (point){
 marker.setPoint(point);
 document.posicion.x.value=point.x
 document.posicion.y.value=point.y
 
 zoom_atual = map.getZoom();
 document.posicao.zoom.value=zoom_atual
 }
}); 
Lembrar que para entender bem este código teremos que ler o artigo anterior, assim como 
possivelmente os precedentes deste manual que tratam sobre eventos. 
Bom, ademais teremos que colocar no formulário um campo novo para escrever o zoom do 
mapa: 
zoom atual: <input type="text" name="zoom" value="" /> 
Isto é tudo. Podemos ver o exercício em funcionamento neste link. 
Para ver o código completo do exercício simplesmente mostre o código fonte da página do 
exemplo. 
Artigo por Miguel Angel Alvarez -Tradução de JML 
Evento zoom em um mapa de Google
Estamos no manual de criação de Google Maps, tratando dos eventos sobre mapas de Google. 
Neste caso vamos ver um evento que se executa no momento no qual o usuário muda o zoom 
do mapa. É o evento "zoomend", que se desata no momento que o mapa muda o zoom. 
O tratamento de eventos em mapas de Google já o explicamos no artigo Eventos em mapas de 
Google, neste caso veremos outro exemplo de trabalho com eventos, que servirá para ilustrar 
Desenvolvimento com o API de Google Maps: www.criarweb.com/desenvolvimento-google-maps/ 
© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.
22
http://www.desarrolloweb.com/
http://www.criarweb.com/desenvolvimento-google-maps/
http://www.criarweb.com/artigos/eventos-em-mapas-de-google.html
http://www.criarweb.com/artigos/eventos-em-mapas-de-google.html
http://www.criarweb.com/desenvolvimento-google-maps/
http://www.guiarte.com/mapas-google/desarrolloweb/eventos_zoom.php
http://www.criarweb.com/artigos/mostrar-posicao-de-marca-google-maps-formulario.html
http://www.criarweb.com/artigos/mostrar-posicao-de-marca-google-maps-formulario.html
http://www.criarweb.com/artigos/mostrar-posicao-de-marca-google-maps-formulario.html
Manuais e recursos para desenvolvimento web
www.criarweb.com
melhor o tema. 
Como se disse, para criar um tratamento de um evento produzido pelo usuário, se tem que 
adicionar um escutador de evento com o método addListener da classe GEvent. Este método 
tem que receber o objeto sobre o qual se escutará o evento, o tipo de evento e a função que 
se executará como resposta ao evento (o manejador de eventos). Para obter mais explicações 
deste passo consultar o artigo onde se tratam dos eventos de mapas de google em geral. 
O manejador de evento zoomend, ou seja, a função que se executa quando se produz o 
evento, recebe duas variáveis. Uma é o antigo zoom que tinha o mapa e outra é o novo zoom 
que se colocou. 
Supomos que temos criado um mapa de google e que está declarado no objeto map da classe 
GMap2. Então, se quiséssemos criar um evento para que nos mostrasse em uma caixa de 
alerta, as duas variáveis com o antigo zoom e o novo, faríamos algo como isto: 
GEvent.addListener(map, "zoomend", function (antigoZoom, novoZoom){
 alert("Mudou o zoom do mapa.\nAntigo Zoom: " + antigoZoom + "\nNovo Zoom: " + novoZoom);
}); 
Este simples exercício pode ser visto em funcionamento aqui. 
Colocamos o zoom em um formulário, quando se produz o evento 
Agora, para complicá-lo um pouco mais, mostramos o zoom em um formulário, que se atualiza 
quando o usuário muda o zoom no mapa. Parte deste exercício foi explicado previamente em 
outro artigo: Averiguar o zoom em um mapa de Google Maps. 
Anteriormente já colocávamos o zoom em um formulário, porém se o zoom mudasse não se 
atualizava o valor até que não se alterasse a marca clicando qualquer parte do mapa. Podemos 
ver o que estou dizendo nesta página. 
Como se pode ver, há um formulário na parte de baixo, que se atualiza cada vez que se 
reposiciona a marca. Agora vamos atualizá-lo também quando o usuário mudar o zoom. Para 
isso, temos que definir um escutador do evento zoomend no mapa. 
Realmente, só adicionamos estas linhas para que se produza o comportamento desejado 
quando se faz zoom no mapa. 
GEvent.addListener(map, "zoomend", function (antigoZoom, novoZoom){
 document.posicao.zoom.value=novoZoom
}); 
Podemos ver o exemplo em funcionamento. 
Vendo seu código fonte podemos ter uma idéia do exercício completo. Porém, lembramos que 
para entendê-lo temos que seguir o artigo Averiguar o zoom em um mapa de Google Maps. 
Artigo por Miguel Angel Alvarez - Tradução de JML 
Construir uma página com um mapa de Google, usando CSS
A construção com mapas de Google, que criamos com o API de Google Maps, é muito simples, 
já que o mapa ocupa o espaço disponível na camada onde estiver o conteúdo. Sendo assim, ao 
incorporar um mapa a uma página web, não temos que especificar o tamanho do mapa por 
Javascript nem nada parecido, simplesmente o mapa de Google tomará os atributos de largura 
e altura da camada (o <div> ) onde está contido. Isto é dinâmico, ou seja, se mudar o espaço 
disponível da camada onde estiver o mapa -já seja porque o usuário mudou o tamanho da 
Desenvolvimento com o API de Google Maps: www.criarweb.com/desenvolvimento-google-maps/ 
© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.
23
http://www.desarrolloweb.com/
http://www.criarweb.com/desenvolvimento-google-maps/
http://www.criarweb.com/artigos/averiguar-zoom-em-mapa-de-google-maps.html
http://www.guiarte.com/mapas-google/desarrolloweb/evento_mapa_zoom2.php
http://www.guiarte.com/mapas-google/desarrolloweb/eventos_zoom.php
http://www.criarweb.com/artigos/averiguar-zoom-em-mapa-de-google-maps.html
http://www.guiarte.com/mapas-google/desarrolloweb/evento_mapa_zoom.php
http://www.criarweb.com/artigos/eventos-em-mapas-de-google.html
Manuais e recursos para desenvolvimento web
www.criarweb.com
janela ou porque se alteraram os atributos width e height da capa com Javascript ou por 
qualquer modo- mudará automaticamente o tamanho do mapa para se ajustar dinamicamente 
ao espaço disponível. 
Dito isto, pode resultar pouco revelador este artigo, porque não vamos ver nada de Javascript, 
nem de criação de mapas de Google, e sim mostraremos como construir com CSS, tendo em 
conta que em uma das camadas há um mapa de Google. Não obstante, certamente algumas 
das informações proporcionadas aqui não serão triviais para os leitores. 
Em CriarWeb.com oferecemos um manual no qual se pode aprender a trabalhar com o API de 
Google Maps. 
Também recomendo a leitura do material que oferecemos em CriarWeb.com sobre a 
construção CSS, pois darei por explicado os aspectos sobre construção com folhas de estilos e 
portanto, não repetirei este conteúdo neste artigo. 
Os atributos de altura e largura de um mapa são a camada que o contém 
O exemplo mais simples que podemos encontrar para construir um mapa de google é que 
tenha dimensões em largura e altura fixas. É como colocamos os mapas no manual até este 
momento: 
<div id="map" style="width: 765px; height: 388px"></div> 
Neste exemplo, o mapa ocupa 765 pixel de largura e 388 de altura. Isto não tem nenhum 
segredo. 
Porém, o que acontece se quisermos que um mapa de Google Maps tenha a largura de toda a 
janela do navegador? Porque sabemos que o navegador pode ter distintos tamanhos, 
dependendo da definição de tela do visitante e se a janela estiver maximizada ou 
dimensionada de qualquer outra forma. 
Então é muito simples, podemos colocar width:100% na declaração de estilos css da camada 
onde está o mapa. 
<div id="map" style="width: 100%; height: 388px"></div> 
Este mapa ocuparia toda a área disponível da janela do navegador, ou da camada onde estiver 
contido. 
O exemplo se complica se quisermos que o mapa de Google ocupe ademais toda a altura 
disponível no navegador, que também, sabemos, pode ser variável dependendo das 
características de tela ou do estado da janela do browser. O normal é que provássemos algo 
como isto: 
<div id="map" style="height: 100%; width:100%;"></div> 
Porém, isto tal qual, sem fazer nenhuma outra coisa, tem um problema e é que 
misteriosamente o mapa aparece vazio ou com height = 0. Isto é porque os navegadores têm 
problemas ao construir com height=100%. A idéia para solucioná-lo é colocar a todas as 
camadas que contenham ao mapa height:100%, assim como às etiquetas <BODY> e <HTML> 
que também deveriam ter o height de 100%. Então, assim deveria funcionar e o mapa 
ocuparia toda a altura e largura da janela. 
Desenvolvimento com o API de Google Maps: www.criarweb.com/desenvolvimento-google-maps/ 
© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.
24
http://www.desarrolloweb.com/
http://www.criarweb.com/desenvolvimento-google-maps/
http://www.criarweb.com/artigos/289.php
http://www.criarweb.com/desenvolvimento-google-maps/http://www.criarweb.com/desenvolvimento-google-maps/
Manuais e recursos para desenvolvimento web
www.criarweb.com
Referência: Podemos ver uma FAQ com explicações sobre a utilização do height:100% em CSS. 
Agora vejamos o exemplo de um mapa de Google Maps que ocupa toda a largura e altura do 
espaço em uma página à parte. 
Construir um mapa de Google com width e height 100%, porém misturado com 
outros elementos 
Para acabar, veremos um exemplo de construção de um Google Maps que ocupa o 100% do 
espaço, porém que tem um cabeçalho e uma barra lateral. O cabeçalho e a lateral ocupam uns 
espaços fixos e o mapa de google ocupará todo o lugar que os outros elementos da construção 
deixam livres. 
Para explicá-lo de uma forma mais simples, veremos diretamente o exemplo em uma página à 
parte. 
O exercício é simples, porém necessitaremos conhecimentos de CSS sobre construção e 
posicionamento. O código é o seguinte: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
<title>Mapa de Google</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=coloque-sua-chave"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
 if (GBrowserIsCompatible()) {
 var map = new GMap2(document.getElementById("map")); 
 map.setCenter(new GLatLng(33,0),3); 
 map.addControl(new GLargeMapControl());
 map.setMapType(G_NORMAL_MAP); 
 }
}
window.onload=load
//]]>
</script>
<style type="text/css">
html,body{
margin:0px;
height:100%;
}
</style>
</head>
<body>
<div id="conteiner" style="width:100%; height:100%;">
 <div id="cabecalho" style="background-color: #ffcc99; font-weight:bold; font-size: 110%; height: 23px; padding: 
3px; margin-bottom:10px;">Isto é o cabeçalho!!</div>
 <div id="lateral" style="float:right; width:200px; height:100%; background-color:#eeff99;">
 <div id="conteudolateral" style="padding: 30px 10px 0 10px;">
 Por <a href="http://www.guiarte.com">guiarte.com</a>
 <br />
 <br />
 Isto são conteúdos que colocamos na lateral esquerda. É muito fácil construir com um mapa de Google em uma 
Desenvolvimento com o API de Google Maps: www.criarweb.com/desenvolvimento-google-maps/ 
© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.
25
http://www.desarrolloweb.com/
http://www.criarweb.com/desenvolvimento-google-maps/
http://www.guiarte.com/mapas-google/desarrolloweb/ej_maquetacion.php
http://www.guiarte.com/mapas-google/desarrolloweb/ej_maquetacion.php
http://www.guiarte.com/mapas-google/desarrolloweb/ej_maquetacion1.php
http://www.criarweb.com/faq/css-height-100.html
Manuais e recursos para desenvolvimento web
www.criarweb.com
camada que toma o tamanho do contêiner onde se encontra.
 </div>
 </div>
 <div id="map" style="height: 100%; margin-right:210px;"></div>
</div>
</body>
</html> 
Artigo por Miguel Angel Alvarez - Tradução de JML 
Desenhar linhas em mapas de Google
Continuamos estudando a criação de mapas de Google com o API de Google Maps, nesta 
ocasião para mostrar o processo de criação de linhas sobre mapas de Google. As linhas se 
desenham em cima dos mapas e se mostram com uma pequena transparência, para que se 
possa ver o que há debaixo delas. 
Desenhar linhas ou polígonos é um modo muito interessante de marcar elementos ou 
caminhos no mapa e é muito simples. Só necessitamos conhecer previamente alguns conceitos 
sobre a criação de mapas, que já vimos em artigos anteriores, no manual: Manual do API de 
Google Maps. 
Para ilustrar este exemplo, vamos criar uma linha em um mapa de Google que vai de Madri a 
Barcelona. Podemos ver o exemplo em funcionamento em uma página à parte. 
Classe GPolyline 
Esta classe serve para desenhar linhas ou polígonos em um mapa. Tenta fazer o trabalho 
utilizando as características de desenho com vetores dos navegadores e se não for possível 
sobrepõe uma imagem ao mapa. 
Para construir um polígono se necessitam vários parâmetros: 
• Array com os vértices das linhas, que se indica com os distintos pontos. 
• A cor das linhas, que é um RGB em hexadecimal, como os que utilizamos para definir 
cores em HTML, começando por #. Ex: #ff8800. 
• A largura das linhas, em pixels. 
• A opacidade com um valor que vai de zero a um. 
• Outras opções. 
O único parâmetro que necessitamos indicar de maneira obrigada são os pontos das linhas, os 
outros parâmetros são opcionais. 
Para indicar os pontos dos vértices, se utiliza a classe GLatLng, que serve para criar objetos 
que têm as duas coordenadas geográficas latitude e longitude. Por exemplo, para definir os 
pontos onde estão Madri e Barcelona: 
var madrid = new GLatLng(40.4165020, -3.702564);
var barcelona = new GLatLng(41.38878, 2.15898); 
Agora que temos os pontos da línea a criar, podemos fazer a chamada ao construtor do 
polyline: 
Desenvolvimento com o API de Google Maps: www.criarweb.com/desenvolvimento-google-maps/ 
© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.
26
http://www.desarrolloweb.com/
http://www.criarweb.com/desenvolvimento-google-maps/
http://www.guiarte.com/mapas-google/desarrolloweb/linea.php
http://www.criarweb.com/desenvolvimento-google-maps/
http://www.criarweb.com/desenvolvimento-google-maps/
Manuais e recursos para desenvolvimento web
www.criarweb.com
var polyline = new GPolyline([madrid, barcelona], "#0000dd", 6, 0.4); 
Como vemos, se definiu uma linha com dois pontos, com cor #0000dd que é um azul, com 6 
pixels de largura e 0.4 de opacidade. 
Pintar a linha no mapa com addOverlay 
Para que esta linha fique desenhada no mapa se utiliza o método de GMap2 chamado 
addOverlay() ao que lhe passamos por parâmetro o polyline que havíamos construído. 
map.addOverlay(polyline); 
Todo o código 
Este é o código completo para a configuração do mapa do exemplo: 
function load() {
 if (GBrowserIsCompatible()) {
 var map = new GMap2(document.getElementById("map")); 
 map.setCenter(new GLatLng(40.002,-4.12),5);
 
 var madrid = new GLatLng(40.4165020, -3.702564);
 var barcelona = new GLatLng(41.38878, 2.15898);
 
 var polyline = new GPolyline([madrid, barcelona], "#0000dd", 6, 0.4);
 map.addOverlay(polyline);
 }
}
window.onload=load 
Podemos ver o código completo do mapa acessando ao exemplo e utilizando a funcionalidade 
do navegador de "Ver código fonte". 
Exemplo completo em funcionamento em http://www.guiarte.com/mapas-
google/desarrolloweb/linea.php 
Artigo por Miguel Angel Alvarez - Tradução de JML 
Polígonos com linhas geodésicas em mapas de Google
Continuamos a explicação do artigo sobre mapas de Google e polígonos. Anteriormente vimos 
como criar uma linha reta em um mapa de Google entre dois pontos dados. Agora vamos ver 
como criar um polígono com vários pontos e linhas geodésicas. 
Primeiro, temos que explicar o que são linhas geodésicas. Como sabemos, a terra é esférica e 
portanto, sua superfície tem uma curvatura, apesar que nos mapas aparece a terra sobre um 
plano reto. Por isso, para ir de um ponto a outro no mapa, realmente não iremos em linha 
reta, e sim realizando essa forma da curvatura da terra. Isto é porque a distância mais curta 
entre dois pontos da terra se representaria com uma curva geodésica. 
Para dizer ao API de mapas de Google que trace linhas geodésicas sobre o mapa temos que 
Desenvolvimento com o API de Google Maps: www.criarweb.com/desenvolvimento-google-maps/ 
© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.
27
http://www.desarrolloweb.com/
http://www.criarweb.com/desenvolvimento-google-maps/
http://www.criarweb.com/artigos/desenhar-linhas-em-mapas-de-google.html
http://www.guiarte.com/mapas-google/desarrolloweb/linea.php
http://www.guiarte.com/mapas-google/desarrolloweb/linea.phpManuais e recursos para desenvolvimento web
www.criarweb.com
especificá-lo na hora de instanciar o polígono. Para isso, primeiro temos que definir uma opção 
adicional ao polígono: 
var opcoes_poligono = {geodesic:true}; 
Agora passamos essas opções como último parâmetro no construtor do objeto da classe 
GPolyline. 
Imaginemos que queremos construir um polígono que faz esta rota: Madri, Moscou, Istambul, 
Roma, Tunísia e Madri. Primeiro, criaríamos os pontos dessas cidades: 
var madri = new GLatLng(40.4165020, -3.702564);
var moscou = new GLatLng(55.7522222, 37.6155556);
var istambul = new GLatLng(41.0186111, 28.9647222);
var roma = new GLatLng(41.9, 12.4833333);
var tunisia = new GLatLng(36.8027778, 10.1797222); 
E logo instanciaríamos o polígono, indicando que queremos linhas geodésicas, desta forma: 
var poligono = new GPolyline([madri, moscou, istambul, roma, tunisia, madri], "#cccc00", 6, 0.6, opcoes_poligono); 
Por último ordenamos que se pinte o polígono no mapa com o método addOverlay(). 
map.addOverlay(poligono); 
Podemos ver um exemplo que faz este mapa com o polígono com linhas geodésicas. 
Artigo por Miguel Angel Alvarez - Tradução de JML 
Polígonos em mapas de Google
O API de Google Maps permite desenhar vários tipos de elementos para sobrepor sobre os 
mapas de Google. Em nosso manual sobre o desenvolvimento com o API de Google Maps já 
explicamos a maneira de colocar marcas e linhas. Agora é a vez dos polígonos. 
Os polígonos em mapas de Google se colocam de maneira similar a como se fazem as linhas, 
indicando os pontos ou vértices, com suas correspondentes coordenadas de latitude e 
longitude. No caso dos polígonos, temos que indicar os pontos desde o primeiro até o último, 
sendo o último ponto o mesmo que o primeiro, para que se possa fechar o polígono. 
A parte inovadora com respeito às linhas é que nos polígonos se pode indicar não só a cor da 
borda, como também a cor do preenchimento com a qual queremos pintar a parte interna do 
polígono. 
A classe GPolygon é a encarregada de dar suporte à implementação de polígonos nos mapas. 
Para criar um polígono temos que utilizar o construtor da classe GPolygon, que recebe uma 
série de parâmetros para a configuração do mesmo. A instanciação de um polígono se realiza 
da seguinte maneira: 
var objeto_poligono = new GPolygon([ponto1, ponto2, …, ponto1], cor_borda, tamanho_borda, opacidade_borda, 
cor_preenchimento, opacidade_preenchimento); 
Vou listar e explicar os parâmetros do construtor de GPolygon para que fiquem claros: 
Pontos dos vértices: Como se pode ver, pode se gerar um polígono com um número 
Desenvolvimento com o API de Google Maps: www.criarweb.com/desenvolvimento-google-maps/ 
© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.
28
http://www.desarrolloweb.com/
http://www.criarweb.com/desenvolvimento-google-maps/
http://www.criarweb.com/artigos/desenhar-linhas-em-mapas-de-google.html
http://www.criarweb.com/desenvolvimento-google-maps/
http://www.guiarte.com/mapas-google/desarrolloweb/linea_geodesic.php
Manuais e recursos para desenvolvimento web
www.criarweb.com
indeterminado de vértices. O único é que o percorrido de vértices tem que estar fechado, ou 
seja, começar e acabar no mesmo ponto, para que não se produzam comportamentos 
indefinidos na hora de pintar o polígono. Todos os pontos ou vértices têm que ser indicados 
com um objeto GLatLng, que se compõe das coordenadas de latitude e longitude. 
Cor da borda: Uma cadeia com uma cor RGB em hexadecimal, tal como se definem em HTML. 
Tamanho da borda: Um número inteiro, que é o número de pixels da borda. 
Opacidade da borda: Um número entre 0 e 1. Quanto mais baixo, mais transparente e 
quanto mais alto mais opaco. 
Cor_preenchimento: Um valor de tipo cadeia com a cor RGB em hexadecimal. 
Opacidade do preenchimento: Também um valor entre 0 e 1, igual à opacidade da borda. 
Para dar a ordem a um mapa de Google que desenha um polígono gerado se utiliza método 
addOverlay() do objeto mapa, da classe GMap2, de maneira similar a como fizemos ao 
desenhar linhas: 
map.addOverlay(objeto_poligono); 
Exemplo de criação de um polígono em um mapa de Google Maps 
Agora vejamos um exemplo de criação de um polígono. Neste caso realizamos um cujos lados 
se sobrepõe à muralha de Ávila (Espanha) e cujo interior seria a cidade amuralhada. Primeiro, 
tivemos que obter e gerar os pontos (latitude e longitude, com a classe GLatLng) dos vértices 
da muralha: 
var muralha1 = new GLatLng(40.65627360348711, -4.707534313201904); 
var muralha2 = new GLatLng(40.65884555247438, -4.706525802612305); 
var muralha3 = new GLatLng(40.658715329592404, -4.70139741897583); 
var muralha4 = new GLatLng(40.658259547503505, -4.697213172912598); 
var muralha5 = new GLatLng(40.656680564044166, -4.696569442749023); 
var muralha6 = new GLatLng(40.65399457849209, -4.697320461273193); 
Logo, criamos o polígono utilizando estes pontos e as configurações desejadas: 
var polygon = new GPolygon([muralha1, muralha2, muralha3, muralha4, muralha5, muralha6, muralha1], "#669933", 
5, 0.7, "#996633", 0.4); 
Isto criará um polígono sobre os vértices tirados da muralha de Ávila, com cor de borda 
#669933, tamanho de borda 5 pixel, opacidade da borda 0.7 (mais para opaco), com cor do 
preenchimento #996633 e opacidade do preenchimento 0.4 (mais para transparente). 
Por último, mostraríamos o polígono com addOverlay(). 
map.addOverlay(polygon); 
Podemos ver o exemplo em funcionamento em: http://www.guiarte.com/mapas-
google/desarrolloweb/poligonos.php 
Recomendamos ver o código fonte deste exemplo. Abra o exemplo e utilize o menu "Exibir - 
Código-fonte", para ver o código completo da criação do mapa de Google com o polígono. 
Artigo por Miguel Angel Alvarez - Tradução de JML 
Eventos e polígonos em Google Maps
Para desenvolver alguma funcionalidade adicional dos polígonos nos mapas de Google vamos 
programar um acréscimo ao script que cria um polígono, que vimos no artigo anterior, para 
Desenvolvimento com o API de Google Maps: www.criarweb.com/desenvolvimento-google-maps/ 
© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.
29
http://www.desarrolloweb.com/
http://www.criarweb.com/desenvolvimento-google-maps/
http://www.criarweb.com/artigos/poligonos-em-mapas-de-google.html
http://www.guiarte.com/mapas-google/desarrolloweb/poligonos.php
http://www.guiarte.com/mapas-google/desarrolloweb/poligonos.php
Manuais e recursos para desenvolvimento web
www.criarweb.com
ocultar e mostrar o polígono por resposta a um evento de usuário. 
Esta funcionalidade de mostrar e ocultar polígonos é comum às distintas overlays que tratamos 
anteriormente no manual de mapas de Google (API de Google Maps). 
O exercício trata de colocar uma marca e um polígono em um mapa de Google. Ao clicar a 
marca se ocultará o polígono e ao voltar a clicar se mostrará de novo, e assim sucessivamente. 
Podemos ver o exemplo em funcionamento para entender bem o objetivo deste manual de 
Google Maps. 
Como dissemos, no artigo anterior vimos como colocar um polígono em um mapa de Google. A 
única diferença com este caso é que definimos a variável onde vamos colocar o objeto 
polígono, da classe GPolygon, como global a toda a página. Isto é porque teremos que acessar 
este objeto polygon através de outras funções para mostrá-lo ou ocultá-lo e se não estiver 
como variável global será impossível referenciá-lo. (Para criar uma variável global basta 
declará-la fora de qualquer função, olhe o código fonte do exercício terminado para ver como 
fazê-lo.) 
Criamos também, como dizíamos uma marca: 
var ponto_marca = new GPoint (-4.702, 40.6570); 
var marca = new GMarker(ponto_marca); 
map.addOverlay(marca); 
Logo, temos que criar o evento "click" à marca, para que quando se clique sobre ela se chame 
uma função que se encarregue de mostrar ou ocultar o polígono. Com o API de Google Maps 
se define um evento da seguinte maneira: 
GEvent.addListener(marca,