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> </td>
<td><input type="SUBMIT" value="Guardar" /></td>
</tr>
</table>
</FORM></div>
<div id="confirmacion"></div>
</body>