O básico para começar a desenvolver com Google Maps II

helldanger1 · Jun 4, 2009

Continuamos mostrando explicações sobre o desenvolvimento com Google Maps. Agora vemos como mostrar marcas e associar ações quando o usuário clica.

Por Javier Chaure

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:

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 - GForum</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);
map.centerAndZoom(point, 3);

</script>

</body>
</html>

helldanger1 · Jun 4, 2009

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);

</script>

</body>
</html>

helldanger1 · Jun 4, 2009

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.

O básico para começar a desenvolver com Google Maps II

helldanger1

GForum VIP

helldanger1

GForum VIP

helldanger1

GForum VIP