Mostrar la posición de una marca de Google Maps en un formulario

  • Por
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>

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

susopb

17/1/2008
lástima que no funcione en Mozilla Firefox, es posible que falte el "return"

midesweb

07/4/2009
A mi me funciona perfectamente en Firefox
El mapa de google de este ejemplo funciona en Firefox. Quizás el problema tuyo sea otro.

rhoss

29/10/2009
mover marca actualizar coordenada
Buenas,

alguien sabe cual es el codigo para que en un bocadillo aparezca las coordenadas, pero si movemos el marcador, se actualicen las coordenadaS?

un saludo.

netovs

19/3/2010
¿y como obtenemos el zoom?
Muy buen articulo me es de mucha utilidad, pero me queda la duda ¿como obtengo el zoom?

Moncho

19/6/2010
Ayuda, esto merengue pero con ASP
Alguien podria ayudarme, necesito exactamente esto, poner las cordenadas en un formulario, pero para ASP (me gusta mas php, el boss es el boss), alguien?

Moncho

19/6/2010
Listo Gracias, error mio
jajaja ando muy desvelado, ya vi bn el codigo, php no tiene nada que ver, es Javascript, excelente si podre utilizarlo xD, gracias

Jorge

15/6/2011
Y si el javascript es externo?
Me párese bueno y claro como explicas la forma de posicionar una marca en un formulario, sin embargo, no logro (no soy experto usando js) hacer lo mismo pero llamando al script de forma externa, desde "script.js"por ejemplo. Te agradecería si me ayudas, saludos!

MikAir78

13/6/2012
Muy buen artículi para el API v2, y para la v3? Alguien tiene idea?
Muy bueno el artículo, es justo lo que necesitaba, pero no me sirve porque estoy usando la versión 3 del API de google Maps y me estoy volviendo loco para mostrar las coordenadas de un marcador en un formulario. Alguien tiene idea de como conseguirlo?

Alvaro

06/9/2012
Como seria con la API V3
Alguien podria repetir el mismo ejercicio pero con la Version 3 de Google Maps?

Marcos Pereira

21/1/2015
undefined en mapa
tengo todo tal como lo describe, inserte mi api key pero siemrpe los resultados son undefined, Dónde está mi error?

Pamela

29/1/2016
undefined en los input.
A mi al tomar las coordenadas y mostrarlas en los input me aparecia la palabra undefined, para las personas que les pase lo mismo solo tienen que cambiar el point.x y point.y por point.lat() y point.lng()



GEvent.addListener(map, "click", function (overlay,point){
if (point){
marker.setPoint(point);
document.posicion.x.value= point.lat()
document.posicion.y.value= point.lng()
}
});

Jhanett

26/5/2017
Consulta
Hola amigos como están, escribo por que tengo un trabajo practico y no se como hacerlo intente varias formas y busque en internet y no encuentro, el caso es que tengo una pagina web en el cual muestro un mapa, hasta ahí bien lo hice, pero, ahora es que quiero imprimir el mapa que se muestra en la pagina web en un archivo pdf alguien me pudiera ayudar, no se como hacerlo, gracias de antemano.

Andres BM

10/3/2018
Insertar al ejemplo un search box
Quisiera agregar un seacrh box al mapa para buscar direcciones en el ejemplo.
Alguien me podría ayudar ??

Néstor Velázquez

26/7/2018
El "x" y el "y" no funcionan en la nueva versión de Google maps.
A las personas que hayan notado que quizá no funciona en Google maps, les comento que se debe a que X y Y ya dejaron de ser métodos directos con las nuevas versiones de API se cambia X y Y en el point por

document.posicion.x.value=point.lat().toFixed(6);
document.posicion.y.value=point.lng().toFixed(6);

Santo remedio.