En un mapa de Google, al pulsar en un punto ponemos una marca y mostramos su posición X Y, o longitud latitud, en un formulario de la página.
Ahora vamos a complicar un poco el ejemplo anterior de recolocar una marca en un mapa de Google, para poner en un formulario en la propia página los valores de latitud y longitud. Esto nos puede servir para saber el punto exacto donde se hace clic, para poder obtener la latitud y longitud de cualquier punto geográfico.
En el ejemplo vamos a tener el mapa de Google y un formulario. El mapa de google, así como el tratamiento del evento con el API de Google Maps ya lo vimos en el anterior capítulo, por lo que no los voy a explicar.
Veremos entonces los nuevos elementos en este ejercicio. Primero el formulario:
<form action="#" id="posicion" name="posicion">
X: <input type="text" name="x" value="" />
<br />
Y: <input type="text" name="y" value="" />
</form>
Vemos el formulario, que es como cualquiera que hayamos utilizado en HTML, al que le hemos puesto un name="posición", para podernos referir a él desde Javascript. Luego vemos los campos X e Y, que son campos de texto normales, con sus respectivos name, para poder actualizar sus valores desde el script.
Ahora el único cambio que hemos incorporado en el código de creación del mapa de Google, es el manejo del evento click sobre el 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
}
});
Simplemente hemos incluido un par de líneas adicionales para acceder al formulario y actualizar los valores de los campos <input> de las coordenadas.
Eso es todo. Podemos ver el ejemplo en marcha en este enlace
El código completo del ejercicio es 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.posicion.x.value=point.x
document.posicion.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="posicion">
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>
En el ejemplo vamos a tener el mapa de Google y un formulario. El mapa de google, así como el tratamiento del evento con el API de Google Maps ya lo vimos en el anterior capítulo, por lo que no los voy a explicar.
Veremos entonces los nuevos elementos en este ejercicio. Primero el formulario:
<form action="#" id="posicion" name="posicion">
X: <input type="text" name="x" value="" />
<br />
Y: <input type="text" name="y" value="" />
</form>
Vemos el formulario, que es como cualquiera que hayamos utilizado en HTML, al que le hemos puesto un name="posición", para podernos referir a él desde Javascript. Luego vemos los campos X e Y, que son campos de texto normales, con sus respectivos name, para poder actualizar sus valores desde el script.
Ahora el único cambio que hemos incorporado en el código de creación del mapa de Google, es el manejo del evento click sobre el 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
}
});
Simplemente hemos incluido un par de líneas adicionales para acceder al formulario y actualizar los valores de los campos <input> de las coordenadas.
Eso es todo. Podemos ver el ejemplo en marcha en este enlace
El código completo del ejercicio es 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.posicion.x.value=point.x
document.posicion.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="posicion">
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>
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...