Colocar los valores numéricos de geolocalización dentro de campos en formulario HTML

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

Place geolocation numerical values within fields in an HTML form

The website is located with a marker position and shows the coordinate data within a DIV, however I need the numerical values of latitude and longitude are loaded into the HTML form fields to be subsequently stored in MySQL data base, as I can load the values in the respective fields of latitude and longitude.

En la pagina web se ubica con un marcador la posicion y se muestran los datos de las coordenadas dentro de un DIV, sin embargo necesito que los valores numéricos de latitud y longitud sean cargados dentro de los campos de un formulario HTML para ser posteriormente guardados en una base datos MySQL, como puedo cargar los valores dentro los respectivos campos de latitud y longitud.

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

This is the code / Este es el codigo fuente

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>