Desenvolvimento Com API Googlemaps

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 captulos)
Miguel Angel Alvarez Traduo de JML

(20 captulos)
Desenvolvimento com o API de Google Maps: www.criarweb.com/desenvolvimento-google-maps/

Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

www.criarweb.com
O bsico para comear a desenvolver com Google Maps I

Um dos ltimos servios do gigante Google que mais deu o que falar Google Maps. Em um
navegador, e com um simples clique o usurio pode dar a volta virtual pelo mundo,
desfrutando de fotos areas de grande qualidade em algumas zonas, e do mapeamento
vetorial completo de outras. Porm, o interessante do servio que Google oferece uma API
(Application Programming Interface) para todos aqueles interessados em usar este servio e
integra-lo em sua prpria pgina, de forma simples e gratuita. Ao longo deste artigo veremos
os fundamentos para integrar Google Maps em nosso website e atravs de um exemplo
criaremos um primeiro mapa usando as funcionalidades mais bsicas da API.
A caracterstica que sem dvida mais chama a ateno do funcionamento de Google Maps a
sua interatividade. Podemos clicar vrias vezes no mapa para nos movermos pelo mundo, dar
zoom e escolher o tipo do mapa sem necessidade de recarregar a pgina, tudo isso de forma
fcil e intuitiva. Este tipo de aplicao web se enquadra dentro da tecnologia que Adaptive Path
denominou AJAX (Asynchronous Javascript + XML). No vamos aprofundar neste artigo no
planejamento AJAX, entretanto, conveniente fazer um breve comentrio para conhecer
grandes aspectos de seu funcionamento.
AJAX no uma nova tecnologia, e sim uma combinao de tecnologias j existentes para
oferecer uma nova viso na hora de criar aplicaes web. Seguindo um planejamento AJAX,
usaremos CSS e DHTML para a apresentao dos dados, o DOM (Document Object Model) para
tratar dinamicamente a apresentao destes dados, XML e XSLT para o correto intercmbio e
manipulao da informao, XMLHttpRequest para obter a informao de maneira assncrona
(quando nos pea o usurio) e Javascript para coordenar a todos estes agentes ao nosso gosto
dependendo de nossas necessidades. Desta forma, temos um "motor" javascript entre a
apresentao e o servidor, que nos far peties de informao de forma assncrona para
incorpora-la imediatamente apresentao de nossa pgina, sem necessidade de recarreg-la
e fazer uma nova petio de pgina completa ao servidor.
Em suma, esta a filosofa de funcionamento de AJAX, um planejamento que sem dvida
oferece grandes possibilidades, como as que podemos ver na prtica com Google Maps.
Podemos ver outros exemplos de aplicaes AJAX em Google Suggest e Gmail.
Como vimos anteriormente na introduo deste artigo, Google nos permite usar Google Maps
em nossa pgina 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 comear a trabalhar so realmente escassos. Com um simples editor de
html e um servidor pblico podemos comear a criar mapas em nosso domnio. importante
assinalar que o servidor onde hospedarmos nossos scripts para Google Maps h de ser pblico,
entre outras razes porque Google monitorizar o uso que fizermos do mapa, de acordo com
seus termos e condies de uso.
O primeiro passo para comear a usar Google Maps obter uma chave (key) que concedida
quando fazemos a inscrio no servio. Esta chave nica para cada usurio de Google Maps e
restritiva no que se refere ao seu uso, j que s nos permite usar os scripts em um dos
diretrios de nosso servidor.
Uma vez que tivermos nossa chave, j estaremos em condies de criar nosso primeiro mapa:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">


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>Introduo 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 cdigo em um servidor pblico obtemos como resultado o seguinte mapa, que
nos mostra uma vista area de Madri centralizada na Puerta de Alcal:
Como se pode ver no cdigo, criamos uma nica camada com id="map" destinada a conter
nosso Google Map. O script que vem a seguir da declarao desta camada o que gera o
mapa. Vejamos sentena a sentena o que faz o cdigo:
Esta sentena gera o mapa especificando como destino o id="map" que atribumos


www.criarweb.com
previamente para nossa camada container. Note que o mapa se adaptar ao tamanho
que tivermos especificado para esta camada.
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 satlite) e "Hybrid" (combinam
ambas vistas). Em nosso caso, j que Google ainda no dispe de mapas vetoriais para
Espanha, escolhemos a vista de satlite que nos mostra a fotografia area da zona.
addControl nos permite incorporar elementos de controle ao mapa, tal e como so o

controle de zoom que vemos esquerda e o selecionador do tipo de mapa. Dependendo
de nossas necessidades podemos incorporar estes controles, ou inclusive verses de
menor tamanho (GSmallMapControl) para mapas em tamanho reduzido. Por padro, o
mapa se mostra sem controles.
map.centerAndZoom(new GPoint (-3.688788414001465, 40.41996541363825), 3);
Com esta sentena indicamos ao nosso GMap que lugar queremos que mostre,
mediante o mtodo centerAndZoom. Os parmetros so um GPoint (que geramos a
seguir a partir de sua latitude e longitude) e o nvel de zoom que queremos mostrar, de
1 a 16, sendo o nvel 1 o mais prximo e o 16 o mais afastado.
Google Maps localiza os pontos nos mapas a partir de sua latitude e longitude. Esta
informao devemos administra-la ns mesmos, e para isso o mais adequado usar
algum dos servios de geocoding disponveis na rede. Um deles por exemplo o de
InfoSports, no qual simplesmente ao clicar em qualquer ponto do mapa obteremos a
latitude e longitude desejadas para esse ponto. Existem outros servios de geocoding
disponveis de forma gratuita na red que no exigem buscar o ponto fsico no mapa,
tais como Geocoder.us e geonames.org, nos quais podemos realizar buscas a partir do
nome da localizao que buscamos.
Artigo por Javier Chaure
O bsico para comear a desenvolver com Google Maps II

Como se pode ver no artigo anterior sobre a criao 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:


www.criarweb.com
O primeiro que necessitamos so 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 cdigo que mostra este segundo mapa o seguinte:
<head>
<title>Introduo a Google Maps - Criarweb</title>
<script src="http://maps.google.com/maps?file=api&v=1&key= ADICIONE_SUA_SENHA_AQUI"
</head>
<body>
//Puerta de Alcal
var point = new GPoint (-3.688788414001465, 40.41996541363825);
var marker = new GMarker(point);
map.addOverlay(marker);
//Plaza de Neptuno
//Plaza de Cibeles


www.criarweb.com
map.centerAndZoom(point, 3);
</script>
</body>
</html>
Como se pode ver, declaramos uma varivel point a partir da qual criamos o marcador para
posteriormente mostr-lo no mapa com addOverlay. Nesta ocasio centralizamos o mapa no
ltimo ponto declarado, o correspondente Plaza de Cibeles.
timo, j temos um mapa criado com uma srie de pontos assinalados sobre ele, porm no
contribuem com nenhuma informao ao visitante. O apropriado seria satisfazer a curiosidade
do usurio proporcionando-lhe algo de informao associada a esse ponto. Adicionamos ento,
algo mais de informao a nossos marcadores mostrando umas janelas informativas que nos
indiquem o nome da localizao fsica sobre a que nos encontramos:
<head>
<title>Introduo a Google Maps - Criarweb</title>
<script src="http://maps.google.com/maps?file=api&v=1&key= ADICIONE_SUA_SENHA_AQUI"
</head>
<body>
function createMarker(point, nombre) {
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(nome);
});
return marker;
}
//Puerta de Alcal
var nombre = "Puerta de Alcal";
var marker = createMarker (point, nome);
//Plaza de Neptuno
var nombre = "Plaza de Neptuno"
//Plaza de Cibeles
var nombre = "Plaza de Cibeles"
map.centerAndZoom(point, 3);

www.criarweb.com
</script>
</body>
</html>
Este cdigo 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 funo que nos cria os markers e seus correspondentes infoWindows
para economizar algo de cdigo. Esta pequena funo recebe como parmetros o GPoint onde
queremos localizar o marker, e um parmetro "nome" que contm a informao que queremos
mostrar na janela informativa associada.
H que resenhar que para associar o aparecimento da janela com o clique do usurio sobre
nosso ponto temos que associar tal evento, que o que se faz na sentena:
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(nome);
});
Desta maneira cada vez que se clica sobre o marker mostra-se na infoWindow a informao
especificada no parmetro "nome". Observe que usamos openInfoWindowHtml, que toma seu
parmetro como cdigo html, de modo que poderamos incluir uma construo ao contedo de
nossa nova infoWindow.
Ao longo deste artigo, vimos as funes mais bsicas de Google Maps, que proporcionam as
ferramentas mais rudimentares para manejar o servio. Apesar de no haver aprofundado
sobre a verdadeira potencialidade do servio, residente no uso de XML, com o aqui aprendido
temos j a bagagem necessria para comear a aprofundar na API de Google Maps e comear
a criar scripts mais avanados.
Nota: Vimos aqui explicado o API 1 de Google Maps. Agora estes cdigos devem ser atualizados seguindo
o API 2 de Google Maps. Para isso, podemos consultar o artigo Mapas de Google API 2.


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
satlite de todo o mundo que teve bastante sucesso entre os Internautas. Se estamos lendo
este artigo at poderemos saber que os Mapas de Google tm um API atravs da qual
podemos integr-lo como servio em uma pgina web. Isto permite que em uma pgina web
desenvolvida por ns mesmo possamos colocar mapas e vistas satlite de diferentes pontos do
planeta, tudo de maneira gratuita.
Bom, pois em CriarWeb.com j havamos publicado um par de artigos sobre os Mapas de
Google que explicavam as regras mais bsicas para comear a publicar mapas satlite em
nosso site.
O bsico para comear 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
necessrio uma reviso para mostrar cdigos de integrao de Google Maps que sejam
compatveis com o API que se utiliza agora.
Entretanto, os artigos anteriores continuam sendo muito interessantes para ler, porque
explicam algumas coisas bsicas 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 cdigo para criar um mapa conforme s especificaes 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#"
//<![CDATA[
//funo para carregar um mapa de Google.
//Esta funo chamada quando a pgina termina de carregar. Evento onload
function load() {
//comprovamos se o navegador compatvel com os mapas de google
if (GBrowserIsCompatible()) {
//instanciamos um mapa com GMap, passando-lhe uma referncia 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 interao com o usurio
map.addControl(new GOverviewMapControl()); ;
}
}
//]]>


www.criarweb.com
</script>
</head>
<body onload="load()" onunload="GUnload()">
</body>
</html>
O cdigo est comentado para uma melhor compreenso. Agora, daremos umas explicaes
adicionais:
Primeiro, embora esteja mais tarde no cdigo, vamos ver o que h no body da pgina. H que
ver que definimos um evento onload="load()", que serve para chamar funo que gera o
mapa, uma vez que tiver terminado de carregar a pgina.
Dentro do corpo da pgina, observemos na etiqueta div onde se mostrar o mapa:
O tamanho definido com estilos a esta camada importante, porque ser o tamanho de
visualizao do mapa. O API de Google Maps reconhecer a largura e altura do container para
mostrar um mapa justamente ocupando esse espao.
Agora observamos o cdigo 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#"
Se observarmos, este cdigo necessita que indiquemos nossa prpria 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 funo que gera o mapa, que se carrega quando termina de se
mostrar a pgina ( chamada pelo evento onload).
Essa funo est bastante comentada e alm disso, Quero deixar para artigos posteriores
diferentes pormenores da gerao de mapas, porm muito importante chamar a ateno
sobre um ponto crtico, que me deu um quebra-cabea quando estava provando os mapas, at
que consegui encontrar o erro. Trata-se do mtodo 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 no funcionar. Isto algo
que est muito claro na documentao do API, porm como um pouco longa de ler, fcil de
no percebermos .
Em minhas provas me falhou porque tentava colocar um tipo de mapa (vista satlite) e logo o
centralizava. O problema que no sai nenhum erro especfico e muito difcil encontrar o
problema.
Artigo por Miguel Angel Alvarez - Traduo de JML


www.criarweb.com
Tipos de mapa en Google Maps

Ao desenvolver com Google Maps podemos escolher o tipo de mapa que os usurios vero,
entre as diferentes vistas pr-definidas como so a vista satlite, vista de ruas o vista hbrida
(satlite e ruas em modo semi-transparente.
Para definir o tipo de mapa em um mapa de Google temos o mtodo setMapType() da classe
GMap2. O mtodo setMapType() recebe o tipo de mapa que se deseja ver. princpio existem
os seguintes tipos de mapa:
G_NORMAL_MAP
para um mapa normal, que o mapa poltico, com os nomes de localizaes. Este mapa o
definido por padro. princpio, aparecem os diferentes pases, porm se ampliarmos veremos
as cidades importantes, estradas, etc e se dermos mais zoom sobre um povoado veremos os
nomes das ruas, praas, bairros, etc.
G_SATELLITE_MAP
Este mapa permite ver o mundo com imagens tomadas por satlite.
G_HYBRID_MAP
Este mapa combina a vista satlite e a vista normal. Sobre as fotos satlite se pintam em cima
as diferentes localizaes, ruas, etc.
Vejamos um mapa de Google no qual definimos o tipo de mapa. Mostramos uma vista satlite
neste caso.
<html>
<head>
<script src="http://maps.google.com/maps?file=api&v=2&key=AQUI-SUA-CHAVE" type="text/javascript"></script>
//<![CDATA[
//funo para carregar um mapa de Google.
//Ser chamada quando a pgina tiver terminado de carregar. Evento onload
function load() {
//comprovamos se o navegador for compatvel com os mapas de google
//instanciamos um mapa com GMap, passando uma referncia camada ou <div> onde quisermos mostrar o
mapa
//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>
</html>
Com este cdigo teremos uma vista satlite de Barcelona centralizada na praa onde est a
esttua 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"

10

www.criarweb.com
pela chave de usurio 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=AQUISUA-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 cdigo.: Google Maps API 2
Agora, se desejarmos um mapa hbrido, s teremos que mudar a linha:

Por esta outra linha, onde especificamos outro tipo de mapa:

map.setMapType(G_HYBRID_MAP);
Tambm podemos provar tirar essa linha onde especificamos o tipo de mapa. Veremos como
sai ento o mapa de ruas. o mesmo que se especificssemos o tipo de mapa normal.
map.setMapType(G_NORMAL_MAP);
Controle para mudar o tipo de mapa de Google

Podem-se incluir vrios 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 trs botes, os quais
clicando, o usurio pode selecionar o tipo de vista que deseja.
Isto se faz com o mtodo addControl da classe GMap2, passando por parmetro uma instncia
do tipo de controle que se deseja incluir. Teramos que colocar esta linha no cdigo, depois de
centralizar o mapa na posio desejada.
Vejamos o cdigo completo de um mapa que tem o controle para mudar o tipo de vista. O
mapa estar centralizado em Pescola, provncia de Castelln, onde o Papa Luna tinha a sede.
<html>
<head>
<script src="http://maps.google.com/maps?file=api&v=2&key=AQUI-SUA-CHAVE" type="text/javascript"></script>
//<![CDATA[
function load() {

11

www.criarweb.com
}
}
//]]>
</script>
</head>
</body>
</html>
Controles em mapas de Google

Como j devemos de saber, os mapas de Google podem ser integrados na pgina de qualquer
pessoa que deseje, atravs de um API em Javascript. Neste caso vamos ver como incluir
controles de usurio dentro de um mapa de Google, como funciona o API neste sentido e que
tipos de controles existem disponveis.
Primeiramente vale dizer que este artigo vem a ampliar a informao do manual
Desenvolvimento com o API de Google Maps, portanto, muitas das explicaes para trabalhar
com os mapas de Google tem de ser consultadas em outros captulos do mencionado manual.
Tipos de controles de usurio
Os controles de usurio dos mapas de Google (controls em ingls) so interfaces desde onde o
usurio pode interagir com o mapa, para efetuar aes como por exemplo, fazer zoom,
selecionar entre tipos de mapa (satlite, mapa, hbrido), ou se mover por um mapa pequeno
mais geral. Todos estes controles esto j criados e existem instrues e classes para inclu-los
facilmente em um mapa de Google.
Embora qualquer desenvolvedor possa criar seus prprios controles, existem vrios tipos de
controles de usurio nos mapas de Google j criados de antemo:
GLargeMapControl: Mostra uma interface para fazer zoom e mover-se pelo mapa, com
uma espcie de regra onde se pode escolher as diferentes aproximaes da vista. Este
controle aparece na parte superior esquerda.
GSmallMapControl: outro controle de usurio para fazer zoom e mover-se pelo mapa,
porm menor, que tambm aparece na esquina superior esquerda.
GSmallZoomControl: Um controle de usurio muito pequeno, que aparece na esquina
superior esquerda que simplesmente tem um boto para ampliar o zoom e outro boto
para reduzi-lo. Porm, no tem botes para mover-se pelo mapa.
GScaleControl: Este um controle que simplesmente informa sobre a escala atual do
mapa. Com este controle no se pode interagir, meramente informativo.
GMapTypeControl: Este controle inclui trs botes para mudar entre diferentes tipos de
mapa (mapa poltico de ruas e estradas, mapa satlite e mapa hbrido -ruas e estradas
sobre o fundo de satlite)
GOverviewMapControl: Com este controle aparece um pequeno mapa na esquina
inferior direita onde aparece uma vista geral com menos zoom do mapa atual, a atravs
do qual tambm podemos nos mover.

12

www.criarweb.com
Adicionar controles a um mapa de Google

Os controles de usurio para os mapas de Google que vimos se incluem com uma simples
instruo Javascript na hora de criar o mapa. Como os controles j esto pr-definidos no API
de Google Maps, simplesmente temos que associ-los ao mapa que estamos criando.
Para isso se utiliza um mtodo 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 mtodo addControl()
recebe uma instancia do controle de usurio que se deseja criar.
Por exemplo, se temos o mapa em um objeto chamado "map", executaremos o mtodo
addControl() desta maneira:
Podemos incluir todos os controles que desejarmos fazendo vrias chamadas ao mtodo
addControl(), passando como parmetro distintas instancias dos controls que queremos incluir.
Vejamos um exemplo completo de um mapa de Google que tem uma srie de controles de
usurio:
<html>
<head>
<script src="http://maps.google.com/maps?file=api&v=2&keyAQUI-SUA-CHAVE-DO-API"
//<![CDATA[
function load() {
map.addControl(new GSmallZoomControl());
map.addControl(new GScaleControl());
map.addControl(new GOverviewMapControl());
}
}
//]]>
</script>
</head>
</body>
</html>
Como havamos dito antes, o desenvolvedor pode criar seus prprios controles para inclu-los
em seus mapas. Este um tema que trataremos mais adiante, porm agora podemos referir
documentao do API Google Maps para obter mais informao:
http://www.google.com/apis/maps/documentation/controls.html
13

www.criarweb.com
Incluir um mapa de tipo fsico

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 fsico, que mostra
a terra com um desenho de sua superfcie que representa as montanhas, rios e outros
acidentes geogrficos.
O mapa fsico foi apresentado h relativamente pouco tempo. Pelo menos quando iniciamos
este manual do API de Google Maps no existia. Portanto, nos artigos publicados
anteriormente no havamos falado da possibilidade de integrar um mapa fsico. Veremos isso
agora.
No controle de seleo de tipo de mapa no aparece por padro o tipo de mapa fsico, com o
que no se pode selecionar pelo usurio, a no ser que ns faamos algo para habilit-lo. Os
tipos de mapas disponveis para o usurio por padro na hora de trabalhar com Google Maps
so os que havamos visto anteriormente:
G_NORMAL_MAP: um mapa poltico, de pases, cidades com suas ruas, etc.

G_SATELLITE_MAP: mapa de imagens de satlite.
G_HYBRID_MAP: Um mapa que superpe a vista de ruas em cima da vista satlite.
Por isso, quando colocamos o controle para mudar o tipo de mapa, nos aparecem trs botes,
para mudar entre qualquer destes tipos de mapas.
Pois bem, ns podemos aumentar a disponibilidade de tipos de mapas de Google, para incluir
novos mapas, como o mapa fsico (G_PHYSICAL_MAP), outros mapas existentes, qualquer que
possam fazer no futuro, ou inclusive mapas criados por ns 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 seleo de tipos de mapa

Agora, para incluir outros tipos de mapas no controle de seleo de tipo de mapa, devemos
utilizar o mtodo addMapType() da classe GMap2, indicando como parmetro o nome do tipo
de mapa que queremos incluir. Por exemplo:
map.addMapType(G_PHYSICAL_MAP);
Isto parece que no um passo obrigatrio para poder mostrar um tipo de mapa, e sim para
que aparea no controle e o usurio possa selecion-lo. Ou seja, para fazer um mapa de
Google fsico com map.setMapType(G_PHYSICAL_MAP) no necessrio que t-lo includo
previamente com map.addMapType(G_PHYSICAL_MAP);
Agora, para tirar um tipo de mapa do controle, fazemos atravs do mtodo removeMapType()
da classe GMap2, indicando um parmetro 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 fsico

14

www.criarweb.com
Para acabar vou mostrar como criar um mapa de Google fsico, que ademais tenha um controle
que permita mudar entre os tipos de mapa poltico, satlite e fsico.
function load() {
map.setCenter(new GLatLng(40.201022,-3.8736677),6);
map.addMapType(G_PHYSICAL_MAP);
map.removeMapType(G_HYBRID_MAP);
map.setMapType(G_PHYSICAL_MAP);
}
}
O cdigo que podemos ver inclui chamadas aos mtodos: addMapType(G_PHYSICAL_MAP),

para indicar que no controle de seleo de tipo de mapa se deve incluir o mapa fsico.
map.removeMapType(G_HYBRID_MAP), para eliminar do controle de seleo de tipos de
mapas o mapa hbrido. O mtodo addControl(new GmapTypeControl()) para incluir na interface
o controle de usurio para mudar o tipo de mapa. E por ltimo
setMapType(G_PHYSICAL_MAP), para definir que o mapa que se deve mostrar desde o
princpio deve ser o mapa fsico.
Podemos ver o exemplo em funcionamento em uma pgina a parte.
Pode-se ver o cdigo fonte da pgina para ver o cdigo do exemplo completo.
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, porm 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 explicaes porque j foram apresentadas em artigos anteriores.
Para inserir marcas temos um mtodo, tambm da classe GMap2, que serve para inserir um
elemento sobre o mapa. O mtodo em concreto se chama addOverlay() e recebe como
parmetro a marca que se quer inserir.
No cdigo anterior o objeto map seria uma instancia da classe GMap2. A varivel 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
15

www.criarweb.com
classe GPoint, que recebe no construtor a longitude e latitude desse ponto.

2) Criamos a marca
Para criar a marca simplesmente utilizamos a classe GMarker, que em seu construtor deve
receber vrios valores. Por enquanto colocaremos somente o nico valor que obrigado
indicar, que o ponto sobre o que colocar a marca, criado no passo anterior.
Exemplo completo
Isso tudo que necessitamos saber por enquanto. Embora logo veremos outro detalhes
interessantes que se podem personalizar nas marcas.
Vejamos o cdigo completo de um mapa de Google com uma marca na praa "Puerta del Sol"
de Madri.
<html>
<head>
<script src="http://maps.google.com/maps?file=api&v=2&key=AQUI-SUA-CHAVE-GOOGLE-MAPS"
//<![CDATA[
function load() {
map.setCenter(new GLatLng(40.41689826118782,-3.7034815549850464), 17);
}
}
//]]>
</script>
</head>
</body>
</html>
Mudar o cone a uma marca

A marca se cria com um cone padro, como uma espcie de tachinha vermelha, porm
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 parmetros, o primeiro obrigado o ponto geogrfico e o
outro o cone, que opcional. No caso em que no se especifique um cone se utiliza o
G_DEFAULT_ICON, que uma constante do API que contm o cone padro.
16

www.criarweb.com
var marker = new GMarker(point, meuIcone);
a varivel 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 instruo se cria um novo cone, a partir de G_DEFAULT_ICON. Ou
seja, um cone novo, porm com todas as caractersticas carregadas do G_DEFAULT_ICON.
Na seguinte linha se modifica a imagem do cone, atribuindo um novo valor a seu atributo
image.
Teramos que falar mais sobre a criao e modificao de cones, porque um tema que
requer maior detalhamento para domin-lo, porm deixaremos para mais adiante.
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 no
nada novo, porque Javascript tambm uma linguagem de programao orientada a eventos e
o API dos mapas de Google est baseado em Javascript.
Porm, h que assinalar que o API de Google Maps incorpora vrios eventos que so prprios
dos mapas de Google e que no fazem parte dos eventos bsicos 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 funes que se chamam escutadores de eventos, que
se tm que registrar dentro do espao de nomes de GEvent. Cada objeto do API dos mapas de
google dispe de uma srie de eventos j definidos, que ademais se executa dentro de um
contexto e passam distintos parmetros 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 usurio clica sobre o mapa. Tal evento passa os argumentos overlay e
point, o primeiro para passar uma marca (se que o usurio clicou em uma marca) e o
segundo para passar o ponto geogrfico 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, esto perfeitamente
documentados na referncia que oferece Google.
Obter o ponto onde clicou o usurio
Vamos mostrar um primeiro exemplo de tratamento de eventos, muito simples, para extrair o
ponto onde o usurio clicou no mapa.
Primeiro, teramos que criar o mapa, tal como fizemos em anteriores ocasies, e adicionar-lhe
a GEvent um escutador de eventos (Event listener) para quando se clique sobre o mapa.
map.setCenter(new GLatLng(33,0),3);
17

www.criarweb.com
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 trs parmetros:
1. O objeto do API sobre o qual se tem que escutar o evento
2. O nome do evento que queremos detectar e fazer aes quando tiver captado
3. O nome da funo que se encarregar de tratar o evento.
Neste caso se adicionou um escutador de evento, para realizar aes quando se "clica" sobre o
objeto map, que o prprio mapa de google. As aes so simplesmente executar a funo
tratamento_clique (observe que s colocamos o nome da funo, sem os parnteses). Agora
temos que codificar o comportamento de nosso mapa quando se clica nele, ou seja, codificar a
funo 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 funo recebe um par de parmetros, que so o contexto no qual se detectou
o evento. Estes dois parmetros so:
overlay: No vamos utiliz-lo agora. Tem que ver quando o usurio clica em uma
marca de um mapa.
point: que o ponto ou as coordenadas geogrficas onde o usurio fez o clique.
O cdigo da funo simplesmente um par de alert, para mostrar mensagens ao usurio. O

primeiro alert simplesmente est para dar uma saudao ao visitante e o segundo mostra as
coordenadas (x e y - latitude, longitude) onde se fez o clique. Tais coordenadas se extraem do
parmetro point que recebemos como contexto do evento, ao que passamos o mtodo
toString() para que extraia sua codificao em cadeia de caracteres.
Pode-se ver o exemplo em funcionamento em uma pgina a parte.
Manejar um evento em um mapa de Google para reposicionar uma marca

No anterior captulo 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 posio 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 cdigo para criar o mapa com uma marca:
map.setCenter(new GLatLng(40,-4),3);
18

www.criarweb.com
var point = new GPoint (-4,40);
Este mapa, centralizado na Espanha, tem uma marca tambm na Espanha. Agora vejamos o
simples cdigo 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
funo que recebe dois parmetros (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 funo comeamos 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 ento queremos
recolocar a marca. Ento, chamamos ao mtodo da marca setPoint(point) para reposicionar a
marca ao ponto recebido por parmetro.
bem simples, no ? Podemos ver o exemplo em funcionamento neste link.
Para acabar, deixo aqui o cdigo completo deste exerccio:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>Mapa de Google</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=chave"
//<![CDATA[
function load() {

if (point){
}
});
}
window.onload=load
//]]>
19

www.criarweb.com
</script>
</head>
<body>
</body>
</html>
Mostrar a posio de uma marca de Google Maps em um formulrio

Agora vamos complicar um pouco o exemplo anterior de recolocar uma marca em um mapa de
Google, para colocar em um formulrio na prpria pgina 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 geogrfico.
No exemplo vamos ter o mapa de Google e um formulrio. O mapa de google, assim como o
tratamento do evento com o API de Google Maps j o vimos no captulo anterior, portanto no
ser explicado novamente.
Veremos ento os novos elementos neste exerccio. Primeiro o formulrio:
<form action="#" id="posicao" name="posicao">
X: <input type="text" name="x" value="" />
<br />
Y: <input type="text" name="y" value="" />
</form>
Vemos o formulrio, que como qualquer um que tivermos utilizado em HTML, ao qual lhe
colocamos um name="posicao", para poder nos referirmos a ele atravs de Javascript. Logo,
vemos os campos X e Y, que so campos de texto normais, com seus respectivos name, para
poder atualizar seus valores desde o script.
Agora a nica mudana que incorporamos no cdigo de criao do mapa de Google, o
manejo do evento clique sobre o mapa.
if (point){
document.posicion.x.value=point.x
document.posicion.y.value=point.y
}
});
Simplesmente, inclumos um par de linhas adicionais para acessar ao formulrio e atualizar os

valores dos campos <input> das coordenadas.
Isso tudo. Podemos ver o exemplo em funcionamento em este link
O cdigo completo do exerccio este:

20

www.criarweb.com

<head>
<script src="http://maps.google.com/maps?file=api&v=2&key=TU-GOOGLE-MAPS-KEY"
//<![CDATA[
function load() {
if (point){
document.posicao.x.value=point.x
document.posicao.y.value=point.y
}
});
}
window.onload=load
//]]>
</script>
</head>
<body>
<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>
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 comear o mapa. Esta uma tarefa que repetimos numerosas vezes ao
longo do Manual de API de Google Maps. Porm, o mapa interativo e o usurio ao utiliz-lo

21

www.criarweb.com
pode mudar o zoom, para ampliar ou reduzir a definio. Neste artigo vamos aprender a obter
o zoom atual de um mapa quando se produza um evento, ou seja, como resposta a uma ao
de um usurio. Os eventos em mapas de Google j foram tratados anteriormente neste
manual, de fato, este artigo ir ampliar outro que j havamos realizado: Mostrar a posio de
uma marca de Google Maps em um formulrio. Neste caso mostraremos o zoom atual do mapa
de google ao clicar o usurio no mapa e o escreveremos em um formulrio na prpria pgina.
Na verdade, saber o zoom em um mapa simples, s temos que utilizar o mtodo getZoom()
da classe GMap2. getZoom() devolve um nmero inteiro, que o zoom atual do mapa.
Coloquemos que temos o objeto mapa em uma varivel chamada "map". Sendo assim,
executaremos o mtodo com isto:
zoom_atual = map.getZoom();
Assim, teramos salvo em uma varivel zoom_atual o valor inteiro do zoom do mapa.
Se quisermos mostrar em um formulrio na pgina o zoom atual, como resposta ao evento
clique, faremos algo como isto:
if (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 cdigo teremos que ler o artigo anterior, assim como
possivelmente os precedentes deste manual que tratam sobre eventos.
Bom, ademais teremos que colocar no formulrio um campo novo para escrever o zoom do
mapa:
zoom atual:
<input type="text" name="zoom" value="" />
Isto tudo. Podemos ver o exerccio em funcionamento neste link.

Para ver o cdigo completo do exerccio simplesmente mostre o cdigo fonte da pgina do
exemplo.
Evento zoom em um mapa de Google

Estamos no manual de criao de Google Maps, tratando dos eventos sobre mapas de Google.
Neste caso vamos ver um evento que se executa no momento no qual o usurio 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
22

www.criarweb.com
melhor o tema.
Como se disse, para criar um tratamento de um evento produzido pelo usurio, se tem que
adicionar um escutador de evento com o mtodo addListener da classe GEvent. Este mtodo
tem que receber o objeto sobre o qual se escutar o evento, o tipo de evento e a funo que
se executar como resposta ao evento (o manejador de eventos). Para obter mais explicaes
deste passo consultar o artigo onde se tratam dos eventos de mapas de google em geral.
O manejador de evento zoomend, ou seja, a funo que se executa quando se produz o
evento, recebe duas variveis. 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. Ento, se quisssemos criar um evento para que nos mostrasse em uma caixa de
alerta, as duas variveis com o antigo zoom e o novo, faramos algo como isto:
GEvent.addListener(map, "zoomend", function (antigoZoom, novoZoom){
alert("Mudou o zoom do mapa.\nAntigo Zoom: " + antigoZoom + "\nNovo Zoom: " + novoZoom);
});
Este simples exerccio pode ser visto em funcionamento aqui.

Colocamos o zoom em um formulrio, quando se produz o evento
Agora, para complic-lo um pouco mais, mostramos o zoom em um formulrio, que se atualiza
quando o usurio muda o zoom no mapa. Parte deste exerccio foi explicado previamente em
outro artigo: Averiguar o zoom em um mapa de Google Maps.
Anteriormente j colocvamos o zoom em um formulrio, porm se o zoom mudasse no se
atualizava o valor at que no se alterasse a marca clicando qualquer parte do mapa. Podemos
ver o que estou dizendo nesta pgina.
Como se pode ver, h um formulrio na parte de baixo, que se atualiza cada vez que se
reposiciona a marca. Agora vamos atualiz-lo tambm quando o usurio 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 cdigo fonte podemos ter uma idia do exerccio completo. Porm, lembramos que
para entend-lo temos que seguir o artigo Averiguar o zoom em um mapa de Google Maps.
Construir uma pgina com um mapa de Google, usando CSS

A construo com mapas de Google, que criamos com o API de Google Maps, muito simples,
j que o mapa ocupa o espao disponvel na camada onde estiver o contedo. Sendo assim, ao
incorporar um mapa a uma pgina web, no 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 dinmico, ou seja, se mudar o espao
disponvel da camada onde estiver o mapa -j seja porque o usurio mudou o tamanho da
23

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 espao disponvel.
Dito isto, pode resultar pouco revelador este artigo, porque no vamos ver nada de Javascript,
nem de criao de mapas de Google, e sim mostraremos como construir com CSS, tendo em
conta que em uma das camadas h um mapa de Google. No obstante, certamente algumas
das informaes proporcionadas aqui no sero triviais para os leitores.
Em CriarWeb.com oferecemos um manual no qual se pode aprender a trabalhar com o API de
Google Maps.
Tambm recomendo a leitura do material que oferecemos em CriarWeb.com sobre a
construo CSS, pois darei por explicado os aspectos sobre construo com folhas de estilos e
portanto, no repetirei este contedo neste artigo.
Os atributos de altura e largura de um mapa so a camada que o contm
O exemplo mais simples que podemos encontrar para construir um mapa de google que
tenha dimenses em largura e altura fixas. como colocamos os mapas no manual at este
momento:
Neste exemplo, o mapa ocupa 765 pixel de largura e 388 de altura. Isto no tem nenhum
segredo.
Porm, 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 definio de tela do visitante e se a janela estiver maximizada ou
dimensionada de qualquer outra forma.
Ento muito simples, podemos colocar width:100% na declarao de estilos css da camada
onde est o mapa.
<div id="map" style="width: 100%; height: 388px"></div>
Este mapa ocuparia toda a rea disponvel 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
disponvel no navegador, que tambm, sabemos, pode ser varivel dependendo das
caractersticas de tela ou do estado da janela do browser. O normal que provssemos algo
como isto:
<div id="map" style="height: 100%; width:100%;"></div>
Porm, 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 tm
problemas ao construir com height=100%. A idia para solucion-lo colocar a todas as
camadas que contenham ao mapa height:100%, assim como s etiquetas <BODY> e <HTML>
que tambm deveriam ter o height de 100%. Ento, assim deveria funcionar e o mapa
ocuparia toda a altura e largura da janela.
24

www.criarweb.com
Referncia: Podemos ver uma FAQ com explicaes sobre a utilizao do height:100% em CSS.
Agora vejamos o exemplo de um mapa de Google Maps que ocupa toda a largura e altura do
espao em uma pgina parte.
Construir um mapa de Google com width e height 100%, porm misturado com
outros elementos
Para acabar, veremos um exemplo de construo de um Google Maps que ocupa o 100% do
espao, porm que tem um cabealho e uma barra lateral. O cabealho e a lateral ocupam uns
espaos fixos e o mapa de google ocupar todo o lugar que os outros elementos da construo
deixam livres.
Para explic-lo de uma forma mais simples, veremos diretamente o exemplo em uma pgina
parte.
O exerccio simples, porm necessitaremos conhecimentos de CSS sobre construo e
posicionamento. O cdigo o seguinte:
<head>
<script src="http://maps.google.com/maps?file=api&v=2&key=coloque-sua-chave"
//<![CDATA[
function load() {
map.setCenter(new GLatLng(33,0),3);
}
}
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 cabealho!!</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 so contedos que colocamos na lateral esquerda. muito fcil construir com um mapa de Google em uma

25

www.criarweb.com
camada que toma o tamanho do continer onde se encontra.

</div>
</div>
<div id="map" style="height: 100%; margin-right:210px;"></div>
</div>
</body>
</html>
Desenhar linhas em mapas de Google

Continuamos estudando a criao de mapas de Google com o API de Google Maps, nesta
ocasio para mostrar o processo de criao de linhas sobre mapas de Google. As linhas se
desenham em cima dos mapas e se mostram com uma pequena transparncia, para que se
possa ver o que h debaixo delas.
Desenhar linhas ou polgonos um modo muito interessante de marcar elementos ou
caminhos no mapa e muito simples. S necessitamos conhecer previamente alguns conceitos
sobre a criao 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 pgina parte.
Classe GPolyline
Esta classe serve para desenhar linhas ou polgonos em um mapa. Tenta fazer o trabalho
utilizando as caractersticas de desenho com vetores dos navegadores e se no for possvel
sobrepe uma imagem ao mapa.
Para construir um polgono se necessitam vrios parmetros:
Array com os vrtices 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, comeando por #. Ex: #ff8800.
A largura das linhas, em pixels.
A opacidade com um valor que vai de zero a um.
Outras opes.
O nico parmetro que necessitamos indicar de maneira obrigada so os pontos das linhas, os
outros parmetros so opcionais.
Para indicar os pontos dos vrtices, se utiliza a classe GLatLng, que serve para criar objetos
que tm as duas coordenadas geogrficas latitude e longitude. Por exemplo, para definir os
pontos onde esto 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 lnea a criar, podemos fazer a chamada ao construtor do
polyline:

26

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 mtodo de GMap2 chamado
addOverlay() ao que lhe passamos por parmetro o polyline que havamos construdo.
map.addOverlay(polyline);
Todo o cdigo
Este o cdigo completo para a configurao do mapa do exemplo:
function load() {
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 cdigo completo do mapa acessando ao exemplo e utilizando a funcionalidade

do navegador de "Ver cdigo fonte".
Exemplo completo em funcionamento em http://www.guiarte.com/mapasgoogle/desarrolloweb/linea.php
Polgonos com linhas geodsicas em mapas de Google

Continuamos a explicao do artigo sobre mapas de Google e polgonos. Anteriormente vimos
como criar uma linha reta em um mapa de Google entre dois pontos dados. Agora vamos ver
como criar um polgono com vrios pontos e linhas geodsicas.
Primeiro, temos que explicar o que so linhas geodsicas. Como sabemos, a terra esfrica e
portanto, sua superfcie 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 no iremos em linha
reta, e sim realizando essa forma da curvatura da terra. Isto porque a distncia mais curta
entre dois pontos da terra se representaria com uma curva geodsica.
Para dizer ao API de mapas de Google que trace linhas geodsicas sobre o mapa temos que

27

www.criarweb.com
especific-lo na hora de instanciar o polgono. Para isso, primeiro temos que definir uma opo
adicional ao polgono:
var opcoes_poligono = {geodesic:true};
Agora passamos essas opes como ltimo parmetro no construtor do objeto da classe
GPolyline.
Imaginemos que queremos construir um polgono que faz esta rota: Madri, Moscou, Istambul,
Roma, Tunsia e Madri. Primeiro, criaramos os pontos dessas cidades:
var
var
var
var
var
madri = new GLatLng(40.4165020, -3.702564);

moscou = new GLatLng(55.7522222, 37.6155556);
istambul = new GLatLng(41.0186111, 28.9647222);
roma = new GLatLng(41.9, 12.4833333);
tunisia = new GLatLng(36.8027778, 10.1797222);
E logo instanciaramos o polgono, indicando que queremos linhas geodsicas, 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 polgono no mapa com o mtodo addOverlay().
map.addOverlay(poligono);
Podemos ver um exemplo que faz este mapa com o polgono com linhas geodsicas.
Polgonos em mapas de Google

O API de Google Maps permite desenhar vrios 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 polgonos.
Os polgonos em mapas de Google se colocam de maneira similar a como se fazem as linhas,
indicando os pontos ou vrtices, com suas correspondentes coordenadas de latitude e
longitude. No caso dos polgonos, 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 polgono.
A parte inovadora com respeito s linhas que nos polgonos se pode indicar no s a cor da
borda, como tambm a cor do preenchimento com a qual queremos pintar a parte interna do
polgono.
A classe GPolygon a encarregada de dar suporte implementao de polgonos nos mapas.
Para criar um polgono temos que utilizar o construtor da classe GPolygon, que recebe uma
srie de parmetros para a configurao do mesmo. A instanciao de um polgono 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 parmetros do construtor de GPolygon para que fiquem claros:
Pontos dos vrtices: Como se pode ver, pode se gerar um polgono com um nmero
28

www.criarweb.com
indeterminado de vrtices. O nico que o percorrido de vrtices tem que estar fechado, ou
seja, comear e acabar no mesmo ponto, para que no se produzam comportamentos
indefinidos na hora de pintar o polgono. Todos os pontos ou vrtices tm que ser indicados
com um objeto GLatLng, que se compe 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 nmero inteiro, que o nmero de pixels da borda.
Opacidade da borda: Um nmero 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: Tambm um valor entre 0 e 1, igual opacidade da borda.
Para dar a ordem a um mapa de Google que desenha um polgono gerado se utiliza mtodo
addOverlay() do objeto mapa, da classe GMap2, de maneira similar a como fizemos ao
desenhar linhas:
map.addOverlay(objeto_poligono);
Exemplo de criao de um polgono em um mapa de Google Maps

Agora vejamos um exemplo de criao de um polgono. Neste caso realizamos um cujos lados
se sobrepe 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 vrtices
da muralha:
var
var
var
var
var
var
muralha1
muralha2
muralha3
muralha4
muralha5
muralha6
=
=
=
=
=
=
new
new
new
new
new
new
GLatLng(40.65627360348711, -4.707534313201904);
GLatLng(40.65884555247438, -4.706525802612305);
GLatLng(40.658715329592404, -4.70139741897583);
GLatLng(40.658259547503505, -4.697213172912598);
GLatLng(40.656680564044166, -4.696569442749023);
GLatLng(40.65399457849209, -4.697320461273193);
Logo, criamos o polgono utilizando estes pontos e as configuraes desejadas:

var polygon = new GPolygon([muralha1, muralha2, muralha3, muralha4, muralha5, muralha6, muralha1], "#669933",
5, 0.7, "#996633", 0.4);
Isto criar um polgono sobre os vrtices 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, mostraramos o polgono com addOverlay().
map.addOverlay(polygon);
Podemos ver o exemplo em funcionamento em: http://www.guiarte.com/mapasgoogle/desarrolloweb/poligonos.php

Recomendamos ver o cdigo fonte deste exemplo. Abra o exemplo e utilize o menu "Exibir Cdigo-fonte", para ver o cdigo completo da criao do mapa de Google com o polgono.
Eventos e polgonos em Google Maps

Para desenvolver alguma funcionalidade adicional dos polgonos nos mapas de Google vamos
programar um acrscimo ao script que cria um polgono, que vimos no artigo anterior, para
29

www.criarweb.com
ocultar e mostrar o polgono por resposta a um evento de usurio.

Esta funcionalidade de mostrar e ocultar polgonos comum s distintas overlays que tratamos
anteriormente no manual de mapas de Google (API de Google Maps).
O exerccio trata de colocar uma marca e um polgono em um mapa de Google. Ao clicar a
marca se ocultar o polgono 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 polgono em um mapa de Google. A
nica diferena com este caso que definimos a varivel onde vamos colocar o objeto
polgono, da classe GPolygon, como global a toda a pgina. Isto porque teremos que acessar
este objeto polygon atravs de outras funes para mostr-lo ou ocult-lo e se no estiver
como varivel global ser impossvel referenci-lo. (Para criar uma varivel global basta
declar-la fora de qualquer funo, olhe o cdigo fonte do exerccio terminado para ver como
faz-lo.)
Criamos tambm, como dizamos 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 funo que se encarregue de mostrar ou ocultar o polgono. Com o API de Google Maps
se define um evento da seguinte maneira:
GEvent.addListener(marca, "click", ocultar_mostrar_poligono);
Isto adiciona o escutador de evento "click" associado ao objeto contido na varivel marca.
Quando se detecte o evento se executa a funo ocultar_mostrar_poligono(). Com outras
palavras, definimos um evento click sobre uma marca, para executar a funo
ocultar_mostrar_poligono() quando se produza.
Agora nos faltaria ver o cdigo da funo que mostra ou oculta o polgono. Esta funo faz uso
da varivel global onde armazenamos o objeto polgono, para acessar aos mtodos de tal
objeto.
function ocultar_mostrar_poligono(){
if (polygon.isHidden()){
//alert("Estava oculto");
polygon.show();
}else{
//alert("Estava se mostrando");
polygon.hide();
}
}
O primeiro que se faz ver se o polgono est ou no oculto, com o mtodo isHidden(), com
polygon.isHidden(), que devolve true no caso em que esteja oculto e false no caso em que
esteja se mostrando.
No caso de estar oculto, chamamos ao mtodo que o mostra, com polygon.show().
No caso de estar visualmente ativo, chamamos ao mtodo para ocult-lo, com polygon.hide().
E no h mais mistrios que no tenhamos visto anteriormente no manual do API de Google
Maps.
Deixo novamente o link para ver o exemplo em funcionamento em uma janela parte.
Observar seu cdigo fonte para obter mais informao.

30

www.criarweb.com
Sobrepor uma imagem em um mapa de Google

Neste artigo do manual de Google Maps vamos explicar o modo de sobrepor uma imagem a
um mapa, o que no API de desenvolvimento de mapas de Google chamam "Ground
Overlays". . Pode nos servir para oferecer informao grfica do lugar que se est
visualizando, ou adicionar elementos para chamar a ateno do usurio.
A tarefa muito simples, pois s necessitamos definir o lugar onde se tem que colar a imagem
que desejamos mostrar e a URL onde se localiza o arquivo grfico a sobrepor. A imagem que
colocarmos sempre aparecer sobre o prprio fundo, tapando o que tiver debaixo.
As imagens que se sobrepem se criam atravs da classe GGroundOverlay, cujo construtor
recebe uma URL ou caminho relativo da imagem e os limites do mapa onde coloc-la.
var imagem = new GGroundOverlay("arquivo-grafico.jpg", limites_imagem);
Os limites da imagem so por sua vez outra classe, chamada GLatLngBounds, que como um
retngulo formado por dois pontos geogrficos, as coordenadas Sul-Oeste e Norte-Leste,
definidas por sua vez com os valores de latitude e longitude. Podemos ver a seguinte imagem,
na que marcamos os dois pontos que necessitamos para definir as bordas ou limites da
imagem, que utilizaremos no construtor da classe GLatLngBounds.
No construtor devemos especificar primeiro o ponto X1 e logo o ponto X2.

var limites_imagem = new GLatLngBounds(x1, x2);
Por sua vez, os pontos x1 e x2 so coordenadas latitude e longitude que devemos criar com a
classe GLatLng, desta maneira:
var x1 = new GLatLng(valor_latitude, valor_longitude);
Uma vez temos o objeto imagem da classe GLatLngBounds, temos que coloc-lo no mapa com
o mtodo do mapa addOverlay(), que havamos utilizado anteriormente para sobrepor
elementos em mapas de google como os polgonos.
map.addOverlay(imagem);
Vemos o cdigo completo para fazer um mapa com uma imagem sobreposta.
31

www.criarweb.com

map.addControl(new GSmallMapControl());
//crio os pontos dos limites da imagem
var x1 = new GLatLng(40.489259,-3.877358);
var x2 = new GLatLng(40.4923928,-3.8675308);
//defino os limites onde vou colocar a imagem
var limites_imagem = new GLatLngBounds(x1, x2);
//Crio um ground overlay
var imagem = new GGroundOverlay("lasrozas.jpg", limites_imagem);
//coloco a imagem ou ground overlay no mapa
map.addOverlay(imagem);
Como se pode comprovar, sobrepor uma imagem algo relativamente simples, embora
tenhamos que definir bem os limites da imagem para que o renderizado fique bem e no se
estique demais na foto.
O exemplo em funcionamento pode ser visto em uma pgina parte.
Incluir as fotos de Panoramio em um mapa de Google

Como devemos saber, Panoramio um servio de Google onde os usurios podem enviar fotos
de qualquer parte do mundo. Atravs do API de Google Maps podemos, de uma maneira muito
rpida, sobrepor uma camada com as fotos do banco de dados de Panoramio. Neste artigo,
veremos como incluir tais fotos para enriquecer nossos mapas com contedo atualizado e de
utilidade.
Este artigo muito simples, pelo menos assim parecer para todos os que tiverem seguido o
Manual de programao do API dos Mapas de Google que viemos publicando em
CriarWeb.com. S vamos utilizar uma nova classe que no havamos visto at agora que a
classe Glayer.
Esta classe GLayer serve para sobrepor camadas com informao geogrfica de outros
websites. Neste caso utilizaremos o website de Panoramio para incluir as fotos inscritas, porm
tambm se pode utilizar GLayer para incluir informao da Wikipedia, por exemplo.
No documento http://spreadsheets.google.com/pub?key=p9pdwsai2hDN-cAocTLhnag podemos
encontrar uma lista das possveis camadas que at agora suporta o API de Google Maps.
Para criar uma camada com GLayer fazemos o seguinte:
var camada_panoramio = new GLayer("com.panoramio.all");
Simplesmente chamamos ao construtor de GLayer e lhe passamos como parmetro o

identificador da camada que queremos mostrar. Os identificadores possveis esto no
documento que fiz referncia anteriormente.
Logo, para fazer com que o layer se mostre em um mapa de Google utilizamos um mtodo,
32

www.criarweb.com
que j vimos anteriormente no manual de CriarWeb.com, da classe GMap2: addOverlay().

map.addOverlay(camada_panoramio);
Temos que passar a addOverlay() a instancia da camada que queremos mostrar, que criamos
ao chamar ao construtor de GLayer.
O cdigo completo para criar um mapa de Google com as fotos de Panoramio seria o seguinte:
function load() {
var camada_panoramio = new GLayer("com.panoramio.all");
map.addOverlay(camada_panoramio);
}
window.onload=load
Podemos ver o exemplo em funcionamento em uma pgina parte.

Incluir referncias Wikipedia em mapas de Google

Neste artigo vamos mostrar como se podem incluir referncias a contedos da Wikipedia em
mapas de Google. Para quem chegar aqui e no souber fazer mapas de Google recomendamos
ler o manual de programao de Google Maps.
A verdade que o pessoal de Google nos facilitou a integrao da Wikipedia com os mapas de
Google e de agradecer. O processo para consegui-lo muito parecido -quase idntico- ao
utilizado para incluir as fotos de Panoramio, tratado anteriormente em CriarWeb.com. Por isso,
recomendamos ler previamente o artigo Incluir fotos de Panoramio em um mapa de Google, j
que h coisas neste artigo que daremos por sabidas, por terem sido explicadas no artigo
mencionado.
Para que se veja o que so as referncias da Wikipedia e como se integram com os mapas de
Google podemos acessar ao exemploque vamos tratar neste artigo.
Sendo assim, passamos a ao. O primeiro que temos que saber que existem diversos
servios que podem ser integrados como camadas de contedos externos em nossos mapas.
Teoricamente, pelo o que diz respeito Wikipedia, temos vrias possibilidades de integrao
que correspondem com os distintos idiomas nos que a enciclopdia trabalha. Para acessar a
uma lista de todos os servios que se podem integrar, temos que entrar em:
http://spreadsheets.google.com/pub?key=p9pdwsai2hDN-cAocTLhnag
Veremos que existem diferentes idiomas que podemos escolher. Ns escolheremos o
portugus, por isso temos que utilizar o identificador de camada org.wikipedia.pt.
Agora, para mostrar uma camada (layer) com um contedo externo, faremos algo como isto:
33

www.criarweb.com
function load() {
var camada_wikipedia = new GLayer("org.wikipedia.pt");
map.addOverlay(camada_wikipedia);
}
}
window.onload=load
Neste artigo sobre incluir as fotos de Panoramio j foi explicado este script passo a passo,
porm podemos remarcar as seguintes particularidades:
var camada_panoramio = new Glayer("org.wikipedia.pt");
Com essa linha se cria uma nova camada, como um objeto da classe Glayer, passando como
parmetro ao construtor a referncia id da camada que queremos mostrar, "org.wikipedia.pt".
map.addOverlay(camada_wikipedia);
Assim, acrescentamos ao mapa de Google a camada que acabamos de criar.

Isso tudo, agora podemos adicionar contedos interessantes ao nosso mapa, que explicam
os pontos geogrficos dos lugares que se destacaram na Wikipedia. to fcil a integrao
com a Wikipedia que, depois de lido este artigo de CriarWeb.com, demorar menos de um
minuto em utiliz-la em seus mapas. Ademais, est disponvel para todos os idiomas mais
usados no mundo.
O exemplo realizado para ilustrar esta funcionalidade se pode ver neste link.
Colorir pases em mapas de Google

Neste artigo vamos conhecer uma maneira de colorir pases em Google Maps. No a nica,
porm talvez sim seja a maneira mais simples de conseguir. Para isso, vamos utilizar a classe
GPolygon, do API de Google Maps, que nos permite desenhar um polgono dadas uma srie de
coordenadas. Os polgonos contm uma linha de contorno e ademais pode-se aplicar cor de
preenchimento. Sendo assim, utilizaremos para colorir a superfcie dos pases e pintar uma
linha que rodeia a silhueta do pas.
No Manual de Mapas de Google, que viemos publicando em CriarWeb.com, j explicamos como
criar e mostrar polgonos nos mapas, com o qual j deveramos dominar os conhecimentos
necessrios para seguir este exemplo.
Antes de continuar, talvez lhe interesse ver o efeito de colorido sobre diferentes pases que
vamos explicar neste artigo.
A parte mais trabalhosa para a realizao dos polgonos de cada pas consiste em obter todos
os pontos geogrficos (latitude, longitude) que necessitaramos para criar seu contorno. Isto
34

www.criarweb.com
representa um grande trabalho, porque teramos que ir, pas por pas, apontando os pontos da
silhueta em arrays, e ademais, quanto mais detalhistas quisermos ser, mais pontos teremos
que extrair. Felizmente, outras pessoas j se encarregaram de obter cada um dos pontos
geogrficos das silhuetas dos pases e alm do mais, disponibilizaram seu trabalho com licena
copyleft, para que outros possam utiliz-lo em suas explicaes.
H um projeto criado por Anieto2k que nos servir de maneira excelente para obter as linhas
de pontos, em uma estrutura de dados tipo array de coordenadas GLatLng, que se pode
utilizar diretamente para a criao dos polgonos em mapas de Google. O projeto mencionado
se chama CountryPoints e est em Google Code na URL:
http://code.google.com/p/countrypoints/
CountryPoints consiste basicamente em um arquivo com cdigo Javascript onde se declaram
uma srie de arrays com pontos geogrficos, baseados em latitudes e longitudes, para gerar
as silhuetas de cada pas. Com esses pontos se podem traar os polgonos para desenhar os
pases. Embora, princpio poderia parecer suficiente um polgono para cada pas, h que
assinalar que muitos deles contm ilhas ou territrios separados do principal, que devem se
especificar em polgonos distintos. Portanto, em CountryPoints temos, para cada pas, uma ou
mais sucesses de pontos para formar um ou mais polgonos sobre a superfcie.
Para ilustrar a forma deste arquivo de pontos, mostraremos aqui um extrato dos pontos de
vrios pases:
//primeiro se declara um objeto
var country = {};
//logo se definem propriedades com as coordenadas para cada pas
//se utilizam cdigos de duas letras para cada pas
country.GU = {
desc: 'GUAM',
coord: [ [new GLatLng(13.235, 144.7094), new GLatLng(13.42778, 144.6552), new GLatLng(13.65229, 144.8761),
new GLatLng(13.235, 144.7094)]]
};
country.PT = {
desc: 'PORTUGAL',
coord: [ [new GLatLng(37.25319, -7.431854), new GLatLng(37.00889, -7.897779), new GLatLng(37.02631,
-8.9892369), new GLatLng(38.71722, -9.118473)], [new GLatLng(37.70555, -25.45611), new GLatLng(37.88389,
-25.85417), new GLatLng(37.70555, -25.45611)], [new GLatLng(32.6375, -16.94361), new GLatLng(32.6375,
-16.94361)]]
};
Escolhi dois pases para mostrar a sintaxe de declarao de pontos de suas silhuetas, embora
tenha tirado muitos pontos a Portugal para que coubesse bem no texto deste artigo de
criarweb.com. Observemos que os pontos se salvam em uma propriedade chamada "coord",
que um array de duas dimenses. Na primeira dimenso tem cada um dos polgonos para
cada um dos territrios separados do pas. Na segunda dimenso tem cada um dos pontos
para fazer o polgono, definidos com objetos GLatLng.
Sendo assim, para criar os polgonos de um pas, por exemplo Portugal, teremos que fazer
algo como isto:
1) Incluir o array com os pontos dos pases.
Para isso, teremos que incluir um cdigo Javascript externo, que est no projeto CountryPoints
de Google Code. (podemos inclu-lo desde o servidor de Google Code ou diretamente baix-lo
e pass-lo ao nosso espao de hosting.
35

www.criarweb.com
<script src="http://countrypoints.googlecode.com/files/countrypoints.js" type="text/javascript"></script>
2) Extraio todos os pontos definidos para Portugal

var coordenadas_portugal = country.PT.coord;
Os cdigos de pases de duas letras so por exemplo, PT para Portugal, ES para Espanha e BR
para Brasil... Estes cdigos esto normalizados segundo normativa ISO 3166-1.
3) Percorrer as coordenadas para criar os polgonos
Com um loop percorro os grupos de coordenadas para criar cada um dos polgonos. (Porque
devemos lembrar que o array de coordenadas era de duas dimenses, para cada um dos
territrios separados do pas)
for (i=0; i<coordenadas_portugal.length; i++){
map.addOverlay(new GPolygon(coordenadas_portugal[i],"#669933", 2, 0.7, "#669933", 0.4));
}
Cdigo completo para colorir pases

A seguir ponho um cdigo completo a utilizar para colorir vrios pases do mundo.
<script src="http://maps.google.com/maps?file=api&v=2&key=tu_lleva_api_google_maps"
<script src="http://countrypoints.googlecode.com/files/countrypoints.js" type="text/javascript"></script>
//<![CDATA[
function load() {
map.addControl(new GSmallZoomControl());
//crio os polgonos de Espanha
var coordenadas_espanha = country.ES.coord;
for (i=0; i<coordenadas_espanha.length; i++){
map.addOverlay(new GPolygon(coordenadas_espanha[i],"#dd6600", 2, 0.7, "#993300", 0.4));
}
//crio os polgonos de portugal
var coordenadas_portugal = country.PT.coord;
for (i=0; i<coordenadas_portugal.length; i++){
map.addOverlay(new GPolygon(coordenadas_portugal[i],"#669933", 2, 0.7, "#669933", 0.4));
}
//crio os polgonos de frana
var coordenadas_franca = country.FR.coord;
for (i=0; i<coordenadas_franca.length; i++){
map.addOverlay(new GPolygon(coordenadas_franca[i],"#000099", 2, 0.7, "#000099", 0.4));
}
//crio os polgonos de Marrocos

var coordenadas_marrocos = country.MA.coord;
for (i=0; i<coordenadas_marrocos.length; i++){
map.addOverlay(new GPolygon(coordenadas_marrocos[i],"#990000", 2, 0.7, "#990000", 0.4));
}

36

www.criarweb.com
}
window.onload=load
//]]>
</script>
O exemplo anterior pode-se ver em funcionamento em uma pgina parte.

Esperamos que tenha sido possvel entender o processo para pintar pases. No prprio blog do
criador de CountryPoints h outras aplicaes sobre a utilizao deste sistema, que de onde
me guiei para fazer o exemplo que vamos publicar em CriarWeb.com.
Colorir pases pode ser muito bom para dar um pouco mais de vida e melhor aspecto a nossas
aplicaes, porm, ademais este exemplo pode servir para aprender a criar um sistema e
definir uma srie de coordenadas de elementos, para colorir qualquer coisa que necessitemos
em mapas geogrficos, como estados de um pas, cidades, bairros, etc.

37

Desenvolvimento Com API Googlemaps

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Desenvolvimento Com API Googlemaps

Transféré par

Droits d'auteur :

Formats disponibles

Manuais e recursos para desenvolvimento web

Desenvolvimento com o API de Google Maps

Miguel Angel Alvarez Traduo de JML

Desenvolvimento com o API de Google Maps: www.criarweb.com/desenvolvimento-google-maps/

Manuais e recursos para desenvolvimento web

O bsico para comear a desenvolver com Google Maps I

Desenvolvimento com o API de Google Maps: www.criarweb.com/desenvolvimento-google-maps/

Manuais e recursos para desenvolvimento web

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

var map = new GMap(document.getElementById("map"));

Desenvolvimento com o API de Google Maps: www.criarweb.com/desenvolvimento-google-maps/

Manuais e recursos para desenvolvimento web

addControl nos permite incorporar elementos de controle ao mapa, tal e como so o

map.centerAndZoom(new GPoint (-3.688788414001465, 40.41996541363825), 3);

O bsico para comear a desenvolver com Google Maps II

Desenvolvimento com o API de Google Maps: www.criarweb.com/desenvolvimento-google-maps/

Manuais e recursos para desenvolvimento web

Desenvolvimento com o API de Google Maps: www.criarweb.com/desenvolvimento-google-maps/

Manuais e recursos para desenvolvimento web

Manuais e recursos para desenvolvimento web

Desenvolvimento com o API de Google Maps: www.criarweb.com/desenvolvimento-google-maps/

Manuais e recursos para desenvolvimento web

Artigo por Javier Chaure

Mapas de Google API 2

O bsico para comear a desenvolver com Google Maps I

Desenvolvimento com o API de Google Maps: www.criarweb.com/desenvolvimento-google-maps/

Manuais e recursos para desenvolvimento web

Desenvolvimento com o API de Google Maps: www.criarweb.com/desenvolvimento-google-maps/

Manuais e recursos para desenvolvimento web

Tipos de mapa en Google Maps

Desenvolvimento com o API de Google Maps: www.criarweb.com/desenvolvimento-google-maps/

Manuais e recursos para desenvolvimento web

Agora, se desejarmos um mapa hbrido, s teremos que mudar a linha:

Por esta outra linha, onde especificamos outro tipo de mapa:

Artigo por Miguel Angel Alvarez - Traduo de JML

Controle para mudar o tipo de mapa de Google

Desenvolvimento com o API de Google Maps: www.criarweb.com/desenvolvimento-google-maps/

Manuais e recursos para desenvolvimento web

Artigo por Miguel Angel Alvarez - Traduo de JML

Controles em mapas de Google

Desenvolvimento com o API de Google Maps: www.criarweb.com/desenvolvimento-google-maps/

Manuais e recursos para desenvolvimento web

Adicionar controles a um mapa de Google

Manuais e recursos para desenvolvimento web

Incluir um mapa de tipo fsico

G_NORMAL_MAP: um mapa poltico, de pases, cidades com suas ruas, etc.

Definir os tipos de mapa do controle de seleo de tipos de mapa

Exemplo de mapa de Google com desenho tipo fsico

Manuais e recursos para desenvolvimento web

O cdigo que podemos ver inclui chamadas aos mtodos: addMapType(G_PHYSICAL_MAP),

Inserir uma marca em um mapa de Google

Manuais e recursos para desenvolvimento web

classe GPoint, que recebe no construtor a longitude e latitude desse ponto.

Mudar o cone a uma marca

Manuais e recursos para desenvolvimento web

var marker = new GMarker(point, meuIcone);

Eventos em mapas de Google

Manuais e recursos para desenvolvimento web

O cdigo da funo simplesmente um par de alert, para mostrar mensagens ao usurio. O

Manejar um evento em um mapa de Google para reposicionar uma marca

Manuais e recursos para desenvolvimento web

GEvent.addListener(map, "click", function (overlay,point){

Manuais e recursos para desenvolvimento web

Artigo por Miguel Angel Alvarez - Traduo de JML