Em um mapa de Google, ao clicar em um ponto colocaremos uma marca e mostraremos sua posição X Y, ou longitude latitude, em um formulário da página.
Publicado em: 13/10/08
Agora vamos complicar um pouco o exemplo anterior de
recolocar uma marca em um mapa de Google, para colocar em um formulário na própria página 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 geográfico.
No exemplo vamos ter o mapa de Google e um formulário. O mapa de google, assim como o tratamento do evento com o API de Google Maps já o vimos no
capítulo anterior, portanto não será explicado novamente.
Veremos então os novos elementos neste exercício. Primeiro o formulário:
<form action="#" id="posicao" name="posicao">
X: <input type="text" name="x" value="" />
<br />
Y: <input type="text" name="y" value="" />
</form>
Vemos o formulário, que é como qualquer um que tivermos utilizado em HTML, ao qual lhe colocamos um name="posicao", para poder nos referirmos a ele através de Javascript. Logo, vemos os campos X e Y, que são campos de texto normais, com seus respectivos name, para poder atualizar seus valores desde o script.
Agora a única mudança que incorporamos no código de criação do mapa de Google, é o manejo do evento clique sobre o mapa.
GEvent.addListener(map, "click", function (overlay,point){
if (point){
marker.setPoint(point);
document.posicion.x.value=point.x
document.posicion.y.value=point.y
}
});
Simplesmente, incluímos um par de linhas adicionais para acessar ao formulário e atualizar os valores dos campos
<input>
das coordenadas.
Isso é tudo. Podemos ver o exemplo em funcionamento em
este link
O código completo do exercício é este:
<!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=TU-GOOGLE-MAPS-KEY"
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);
document.posicao.x.value=point.x
document.posicao.y.value=point.y
}
});
}
}
window.onload=load
//]]>
</script>
</head>
<body>
<div id="map" style="width: 765px; height: 278px"></div>
<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>
