Google Maps API - Criando e interagindo com seus próprios mapas

Dando continuidade aos artigos voltados a Web 2.0, apresento a API Google Maps. Uma ótima ferramenta para a criação de mapas, com possibilidades infinitas de interação.

[ Hits: 37.435 ]

Por: Vinicus S Moraes em 23/09/2008 | Blog: http://vsmoraes.wordpress.com


Markers e InfoWindows



Utilizando Markers

Quem já viu o Google Maps em funcionamento, com certeza sabe o que são "Markers". Markers são figuras em forma de "pino" que marcam um determinado ponto no mapa. Seguindo o mesmo padrão de coordenadas (GlatLng), podemos marcar qualquer ponto no mapa, estando ou não ao alcance no momento.

NOTA: Todos os próximos exemplos contidos neste artigo seguem os mesmos passos básicos do primeiro (Mapa1). Para facilitar, a única sessão que será mexida é que contém o JavaScript.
Linux: Google Maps API - Criando e interagindo com seus próprios mapas.
Imagem 2: Meu primeiro mapa - Mapa2
Alguns comentários foram adicionados e alguns parâmetros alterados para que este exemplo tenha uma visualização melhor, nada que não tenha sido explicado em tópicos anteriores. Neste exemplo devemos prestar bastante atenção nas seguintes linhas:
  • Linha 21: Nesta linha estamos usando duas classes, "GMarker" e "GLatLng" (Mapa1). A classe "GMarker" cria o marcador na posição especificada em seu parâmetro inicial.
  • Linha 22: A função "addOverlay" adiciona objetos ao mapa. Neste caso está adicionando o marcador em sua posição.

InfoWindow: Mostrando informações

InfoWindows são aqueles balões com textos, links, informações em geral. Isso é chamado de "InfoWindow" na API e pode estar vinculado à um ponto no mapa ou à um marker. O texto contido no balão pode ser texto puro ou HTML, permitindo infinitas interações.
Linux: Google Maps API - Criando e interagindo com seus próprios mapas.
Imagem 3: Meu primeiro mapa - Mapa3
Note que a única linha diferente é a 21.
  • Linha 21: Aqui fizemos o uso de duas funções muito interessantes. A primeira é a "openInfoWindow", que abre um balão no ponto indicado no primeiro parâmetro e exibe o texto indicado no segundo parâmetro. A segunda função utilizada foi a "getCenter" que retorna as coordenadas do centro do mapa.

O funcionamento da função "openInfoWindow" para os "Markers" funciona da mesma maneira que para o mapa, exceto que não precisamos informar o ponto onde o balão deverá abrir (primeiro parâmetro). A ilustração do uso de "infowindows" juntamente com "Marker" será abordado no próximo tópico.

Página anterior     Próxima página

Páginas do artigo
   1. Motivação e pré-requisitos
   2. Conseguindo sua chave e o primeiro contato
   3. Markers e InfoWindows
   4. Capturando eventos e conclusão
Outros artigos deste autor

VirtualBox + Apache + PHP + SQL Server

Requisições assíncronas em PHP usando AJAX - Parte I

Atheros Wireless + Slackware 12.0

Leitura recomendada

Banda Larga é um direito de todos!

Listar dados em MySQL utilizando PHP e AJAX (parte 1)

Como minimizar CSS e Javascript via linha de comando

XSS - Cross Site Scripting

jQuery - Criando um simples jogo da velha

  
Comentários
[1] Comentário enviado por grandmaster em 24/09/2008 - 18:27h

Muito legal. Apesar de não lidar muito com isso, sempre tive curiosidade de ver funcionando.

---
Renato de Castro Henriques
CobiT Foundation 4.1 Certified ID: 90391725
http://www.renato.henriques.nom.br



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts