Guardar coordenada de Google Maps con Javascript

loncho_rojas · #1 (**permalink**) 31/10/2011, 15:27

Este codigo lo paso un forero, y resulta bien.. mi unico problema es que el campo INPUT "coordenadas" muestra las coordenadas del Google Maps, pero si quiero enviar ese dato por Post o Get, lo envia vacio..

El objetivo de esto es capturar con el Javascript una coordenada del mapa para enviarlo a la base de datos luego, pero se va vacia siempre, por mas que visualmente el campo INPUT muestre que tiene un VALUE.. porque podria ser?

Cualquier ayuda sera muy bienvenida.. les dejo el codigo completo

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript">
function copiar(frm) {
  frm.address.value = frm.provinciaList.value+' '+frm.localidadList.value+' '+frm.t3.value;
}
</script>  


<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true
    &amp;key=ABQIAAAAlnCuVAz3joudtuBZyyjeGBQ7dS0Aaw1_Q1fdUKG1GXi9hqLEUhTsO6DjXuhO2pK4n6nDQ_d5DrVN_Q"
    type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

    // Inicialización de variables.
    var map      = null;
    var geocoder = null;

    function load() {                                      // Abre LLAVE 1.
      if (GBrowserIsCompatible()) {                           // Abre LLAVE 2.
        map = new GMap2(document.getElementById("map"));

        map.setCenter(new GLatLng(40.229218,-4.240723), 5);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());

        geocoder = new GClientGeocoder();

        //---------------------------------//
        //   MARCADOR AL HACER CLICK
        //---------------------------------//
        GEvent.addListener(map, "click",
            function(marker, point) {
                  if (marker) {
                       null;
                      } else {
                      map.clearOverlays();
                    var marcador = new GMarker(point);
                    map.addOverlay(marcador);
                    //marcador.openInfoWindowHtml("<b><br>Coordenadas:<br></b>Latitud : "+point.y+"<br>Longitud : "+point.x+"<a href=http://www.mundivideo.com/fotos_pano.htm?lat="+point.y+"&lon="+point.x+"&mapa=3 TARGET=fijo><br><br>Fotografias</a>");
                    //marcador.openInfoWindowHtml("<b>Coordenadas:</b> "+point.y+","+point.x);
                    document.fm.coordenadas.value = point.y+","+point.x;
                    }
              }
            );
        //---------------------------------//
        //   FIN MARCADOR AL HACER CLICK
        //---------------------------------//

      } // Cierra LLAVE 1.
    }   // Cierra LLAVE 2.

    //---------------------------------//
    //           GEOCODER
    //---------------------------------//
    function showAddress(address, zoom) {
        if (geocoder) {
            geocoder.getLatLng(address,
                  function(point) {
                    if (!point) {
                        alert(address + " no se ha encontrado, si esta dirección existe y no aparece en el mapa situa manualmente el punto en el mapa haciendo click donde este la ubicación dejando los campos del formulario correctamente");
                    } else {
                        map.setCenter(point, zoom);
                        var marker = new GMarker(point);
                        map.addOverlay(marker);
                        //marker.openInfoWindowHtml("<b>"+address+"</b><br>Coordenadas:<br>Latitud : "+point.y+"<br>Longitud : "+point.x+"<a href=http://www.mundivideo.com/fotos_pano.htm?lat="+point.y+"&lon="+point.x+"&mapa=3 TARGET=fijo><br><br>Fotografias</a>");
                        // marker.openInfoWindowHtml("<b>Coordenadas:</b> "+point.y+","+point.x);
                         coor=document.fm.coordenadas.value = point.y+","+point.x;
						// document.getElementById('coord').innerHTML = coor;
						 
                       }
                   }
            );
          }}
    //---------------------------------//
    //     FIN DE GEOCODER
    //---------------------------------//

    //]]>
     </script>



      <script type="text/javascript" src="http://www.diariothc.com/wp-content/codes/animatedcollapse.js"></script>
      <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true
    &amp;key=ABQIAAAAlnCuVAz3joudtuBZyyjeGBQ7dS0Aaw1_Q1fdUKG1GXi9hqLEUhTsO6DjXuhO2pK4n6nDQ_d5DrVN_Q"
    type="text/javascript"></script>  



</head>

<body onLoad="load();"  onunload="GUnload();">

    <form name="form_mapa" action="#" method="get" onsubmit=" showAddress(this.address.value, this.zoom.value=parseFloat(this.zoom.value)); return false;">


<select name="provinciaList" id="provinciaList" onChange="return provinciaListOnChange()" onclick="copiar(this.form)" />
<option >Seleccione una provincia...</option>
<option >Provincias...</option>        
</select>


<select name="localidadList" id="localidadList" onclick="copiar(this.form)" />
<option >Seleccione una localidad...</option>
<option >localidades...</option>
</td>
</select> 


<input id="t3" type=text name="t3" onkeyup="copiar(this.form)" />


<input class="situar" type="submit" value="Situar en mapa" />



<input type="hidden" name="address"  />

<input type="hidden" size="1" name="zoom" value=15 />






<div id="map" style="width: 432px; height: 300px"></div>


</form>
<form name="fm">
<input type="text" id="coordenadas" name="coordenadas" value="" style="width: 400px;
font-size: 10px;
font-family: verdana;
font-weight: bold;
border:#FF0000 thin dashed;
margin-top:10px;" />
</form>

</body>  
</html>

ocp001a · #2 (**permalink**) 31/10/2011, 16:37

Veo que el campo coordenadas está en un form independiente llamado "fm" ¿es correcto? ¿en qué momento lo subes?