Colocar coordenadas de geolocalizacion dentro de un campo de un formulario

akpshiva · #1 (**permalink**) 27/09/2012, 07:57

Hola Amigos mi solicitud de ayuda es para lo siguiente, tengo ubicado un ejemplo en el cual se produce un mapa con la geolocalización y en donde es posible obtener en un DIV las coordenadas de latitud y longitud (las dos simultaneamente en un mismo renglon de texto), ahora necesito ayuda para poder guardar los datos de la geolocalizacion como son latitud y longitud en un formulario normal de inserción de registros, como hago para que estos valores numéricos se carguen directamente dentro del campo de texto asignado en el formulario en el mismo sitio (Latitud y Longitud en cada campo asignado).

Esta es la URL del ejemplo: http://www.colombiainteligente.com/geolocalizacion/demo.php

Las coordenadas en el ejercicio son colocadas dentro de un DIV pero como se hace para que ponga el valor numerico de la latitud y la longitud en cada campo de texto del formulario respectivamente para poder guardar las coordenadas dentro de una base datos MySQL

Este es el codigo de la pagina:

Código HTML:

<head>
<meta name = "viewport" content = "width = device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">		
<script src="js/gears_init.js" type="text/javascript" charset="utf-8"></script>
<script src="js/geo.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script>
    function initialize_map()
    {
    var myOptions = {
	      zoom: 15,
	      mapTypeControl: true,
	      mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
	      navigationControl: true,
	      navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
	      mapTypeId: google.maps.MapTypeId.ROADMAP      
	    }	
	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    }
    function initialize()
    {
	if(geo_position_js.init())
	{
		document.getElementById('current').innerHTML="Recibiendo Información...";
		geo_position_js.getCurrentPosition(show_position,function(){document.getElementById('current').innerHTML="No puede ubicar posición"},{enableHighAccuracy:true});
	}
	else
	{
		document.getElementById('current').innerHTML="Funcionalidad no disponible";
	}
    }

    function show_position(p)
    {
	document.getElementById('current').innerHTML="Latitud= "+p.coords.latitude.toFixed(2)+" Longitud= "+p.coords.longitude.toFixed(2);
		
	var pos=new google.maps.LatLng(p.coords.latitude,p.coords.longitude);
	map.setCenter(pos);
	map.setZoom(16);
    
	var infowindow = new google.maps.InfoWindow({
	    content: "<table>" +
		         "<tr><td>Ubicación Encontrada</td></tr>" 
                 
	});

	var marker = new google.maps.Marker({
	position: pos,
	map: map,
	title:"Usted está Aquí"
	});

	google.maps.event.addListener(marker, 'click', function() {
	  infowindow.open(map,marker);
	});
	
}
</script >
<style>
	body {
	font-family: Arial, Helvetica, sans-serif;
	font-size:10pt;
	padding:0px;
	margin:0px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #333;
}
	#title {
	background-color:#0066CC;
	padding:5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #FFF;
}
	#current {
	font-size:10pt;
	padding:5px;
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #333;
}	
#formulario {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #333;
	height: 225px;
	width: 320px;
}
#confirmacion {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #333;
	height: 20px;
	width: 320px;
}
</style>
</head>
<body onLoad="initialize_map();initialize()">
	<div id="title"><strong>Mostrar Posición en el Mapa</strong></div>
	<div id="current">Inicializando...</div>
	<div id="map_canvas" style="width:320px; height:190px"></div>
	<div id="formulario"><FORM ACTION="insertar.php" METHOD="POST" target="_self">
<table width="320" border="0" cellspacing="0" cellpadding="5">
  <tr>
    <td colspan="2" align="center"><strong>Registro de Control de Visitas</strong></td>
    </tr>
  <tr>
    <td width="82" align="right">Nombre</td>
    <td width="218"><input name="name" type="TEXT" id="name" value="Juan Gomez" size="32" readonly="readonly" /></td>
  </tr>
  <tr>
    <td align="right">Dirección</td>
    <td><input name="address" type="TEXT" id="address" size="32" /></td>
  </tr>
  <tr>
    <td align="right">Tipo</td>
    <td><label>
      <select name="type" id="type">
        <option value="Opcion 1" selected="selected">Opcion 1</option>
        <option value="Opcion 2">Opcion 2</option>
        <option value="Opcion 3">Opcion 3</option>
      </select>
    </label></td>
  </tr>
  <tr>
    <td align="right">Latitud</td>
    <td><label>
      <input name="lat" type="text" id="lat" value="" />
    </label></td>
  </tr>
  <tr>
    <td align="right">Longitud</td>
    <td><label>
      <input name="lng" type="text" id="lng" />
    </label></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input type="SUBMIT" value="Guardar" /></td>
  </tr>
</table>
	</FORM></div>
	<div id="confirmacion"></div>
</body>

Dradi7 · #2 (**permalink**) 27/09/2012, 08:45

pero solamente en tu funcion showposition agrega estas lineas de codigo para que se agregen la informacion a tus campos de texto

Código Javascript:

Ver originalfunction show_position(p)
{
document.getElementById('myInputLatitud').value = p.coords.latitude
document.getElementById('myInputLongitud').value = p.coords.longitude
...
...
...
}

akpshiva · #3 (**permalink**) 27/09/2012, 14:21

Hola Dradi7 gracias por su respuesta, cargué los datos de su sugerencia pero no me funciona y no me sale el mapa, me consegui otro ejemplo con codigo mas limpio, lo tengo publicado en la URL http://www.colombiainteligente.com/geolocalizacion/geolocalizacion.php y va conectado con un archivo geolocalizacion.js que contiene todo el codigo de geolocalizacion, lo que necesito es tomar los valores numericos de latitud y longitud y poder imprimirlos en los campos del formulario de latitud y longitud cuando me ubique la posición de tal forma que pueda guardarlos a través del formulario, creo que por este lado puede ser mas facil, estoy investigando algo sobre el uso de innerHTML pero no doy con la solucion todavia, si me puede dar una mano le agradezco.

Codigo de geolocalizacion.js

Código HTML:

//funcion autoejecutable para obtener las coordenadas con HTML Geolocation API
//y tambien dibujar un mapa utilizando el API de Google Maps
(function(){
	//capa que va a contener el mapa (esta definida en el documento HTML)
	var divMapa=document.getElementById('divMapa');
	//capa para mostrar las coordenadas (definida tambien en el HTML)
	var divCoordenadas=document.getElementById('divCoordenadas');
	
	//verificamos si el navegador soporta Geolocation API de HTML5
	if(navigator.geolocation){
		//intentamos obtener las coordenadas del usuario
		navigator.geolocation.getCurrentPosition(function(objPosicion){
			//almacenamos en variables la longitud y latitud
			var iLongitud=objPosicion.coords.longitude, iLatitud=objPosicion.coords.latitude;
			//mostramos en pantalla (solo texto) las coordenadas obtenidas
			divCoordenadas.innerHTML='Latitud: '+iLatitud+' - Longitud: '+iLongitud;
				
			//creamos un objeto (para Google Maps) con las coordenadas obtenidas por el API de HTML5
			var objCoordenadas=new google.maps.LatLng(iLatitud,iLongitud);
			
			//opciones del mapa
			var objOpciones={
				mapTypeId:		google.maps.MapTypeId.ROADMAP,	//mapa de carretera
				zoom: 			16,								//acercamiento
				mapTypeControl:	true,							//mostrar controles para cambiar el tipo de mapa
				center: 		objCoordenadas					//centramos el mapa en las coordenadas obtenidas
			};
			
			//dibujamos el mapa de la ubicacion (en la capa divMapa)
			var objMapa=new google.maps.Map(divMapa,objOpciones);
			//agregamos un marcador al mapa con nuestra ubicacion
			var objPunto=new google.maps.Marker({
				title:		'Ubicación Encontrada',	//agregamos un tooltip al punto
				position:	objCoordenadas,						//indicamos las coordenadas del punto
				map:		objMapa								//este es el mapa que anteriormente creamos
			});
		},function(objError){
			//manejamos los errores devueltos por Geolocation API
			switch(objError.code){
				//no se pudo obtener la informacion de la ubicacion
				case objError.POSITION_UNAVAILABLE:
					divMapa.innerHTML='La información de su posición no está disponible.';
				break;
				//timeout al intentar obtener las coordenadas
				case objError.TIMEOUT:
					divMapa.innerHTML='Tiempo de espera agotado.';
				break;
				//el usuario no desea mostrar la ubicacion
				case objError.PERMISSION_DENIED:
					divMapa.innerHTML='Acceso denegado.';
				break;
				//errores desconocidos
				case objError.UNKNOWN_ERROR:
					divMapa.innerHTML='Error desconocido.';
				break;
			}
		});
	}else{
		//el navegador del usuario no soporta el API de Geolocalizacion de HTML5
		divCoordenadas.innerHTML='Su navegador no soporta Geolocation API de HTML5';
	}
})();

Codigo de geolocalizacion.php

Código HTML:

<?php require_once('Connections/geolocalizacion.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") 
{
  if (PHP_VERSION < 6) {
    $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
  }

  $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

  switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;    
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
  }
  return $theValue;
}
}

$editFormAction = $_SERVER['PHP_SELF'];
if (isset($_SERVER['QUERY_STRING'])) {
  $editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']);
}

if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "form1")) {
  $insertSQL = sprintf("INSERT INTO markers (name, address, lat, lng, type) VALUES (%s, %s, %s, %s, %s)",
                       GetSQLValueString($_POST['name'], "text"),
                       GetSQLValueString($_POST['address'], "text"),
                       GetSQLValueString($_POST['lat'], "double"),
                       GetSQLValueString($_POST['lng'], "double"),
                       GetSQLValueString($_POST['type'], "text"));

  mysql_select_db($database_geolocalizacion, $geolocalizacion);
  $Result1 = mysql_query($insertSQL, $geolocalizacion) or die(mysql_error());

  $insertGoTo = "registro_geo.php";
  if (isset($_SERVER['QUERY_STRING'])) {
    $insertGoTo .= (strpos($insertGoTo, '?')) ? "&" : "?";
    $insertGoTo .= $_SERVER['QUERY_STRING'];
  }
  header(sprintf("Location: %s", $insertGoTo));
}
?>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Geolocation</title>
		<link rel="stylesheet" type="text/css" href="css/geolocation.css">
	</head>
	<body>
		<div id="divContenedor">
			<div id="divInfo">Georeferenciación de Ubicación</div>
			<div id="divMapa"></div>
			<div id="divCoordenadas"></div>
		</div>
        <table width="320" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td bgcolor="#D1D1BA">&nbsp;</td>
        </tr>
        <tr>
        <td bgcolor="#D1D1BA">&nbsp;
          <form method="post" name="form1" action="<?php echo $editFormAction; ?>">
            <table align="center" cellpadding="0" cellspacing="5">
              <tr valign="baseline">
                <td nowrap align="right">Nombre:</td>
                <td><input name="name" type="text" value="Jorge Diaz" size="32" readonly="readonly"></td>
              </tr>
              <tr valign="baseline">
                <td nowrap align="right">Dirección:</td>
                <td><input type="text" name="address" value="" size="32"></td>
              </tr>
              <tr valign="baseline">
                <td nowrap align="right">Latitud:</td>
                <td><input name="lat" type="text" value="" size="32"></td>
              </tr>
              <tr valign="baseline">
                <td nowrap align="right">Longitud:</td>
                <td><input type="text" name="lng" value="" size="32"></td>
              </tr>
              <tr valign="baseline">
                <td nowrap align="right">Tipo:</td>
                <td><select name="type" class="texto_formulario" id="type">
                  <option value="Opcion 1" selected="selected">Opcion 1</option>
                  <option value="Opcion 2">Opcion 2</option>
                  <option value="Opcion 3">Opcion 3</option>
                </select></td>
              </tr>
              <tr valign="baseline">
                <td nowrap align="right">&nbsp;</td>
                <td><input type="submit" value="Guardar Ubicación"></td>
              </tr>
            </table>
            <input type="hidden" name="MM_insert" value="form1">
          </form>
          <p>&nbsp;</p></td>
        </tr>
        </table>
        

		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript" src="js/geolocation.js"></script>
	</body>
</html>

Dradi7 · #4 (**permalink**) 27/09/2012, 14:25

tienes un error en tu codigo si te das cuenta estas usando

document.getElementById('lat')

pero en tu input text tienes esto

<input name="lat" type="text" value="" size="32">

acuerdate que cuando usas getElementById hace referencia al id del objeto la cual no tienes y te esta generando error

akpshiva · #5 (**permalink**) 27/09/2012, 14:40

Gracias Dradi7 el nombre lat corresponde al ID del Campo donde quiero colocarlo y la duda es si document.getElementById('lat') hace referencia solo a los <div id="nombre"></div> por ello mi duda de como puedo asignar este atributo al campo en el formulario. El campo de texto en el formulario lo tengo nombrado como <input name="lat" type="text" value="" size="32"> y por ello entendia que el ID es el nombre del campo. No entiendo muy bien esta parte. Le agradezco cualquier ayuda. Mil Gracias.

Dradi7 · #6 (**permalink**) 27/09/2012, 14:45

es que debes diferenciar que es el id y el name

por ejemplo tu puedes tener múltiples names para varios campos como por ejemplo un array, en cambio los id son únicos solo debe ser unico por cada campo no puede haber dos iguales, de la misma manera de que cuando haces una peticion sea POST o sea GET la pagina va a reconocer todos los name de los controles del formulario mas no los id ya que estos se trabajan del lado del cliente mayormente.

Saludos