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.
Parte 3: 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. 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. 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.
---
Renato de Castro Henriques
CobiT Foundation 4.1 Certified ID: 90391725
http://www.renato.henriques.nom.br