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());
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
//]]>
</script>
</head>
<body>
<div id="map" style="width: 765px; height: 388px"></div>
</body>
</html>
