Buenas, tengo este código que debo implementarlo en un formulario... Lo que preciso realizar con el es que el usuario pueda marcar la ubicación de su domicilio para posteriormente guardarlo en la base de datos... Mi problema es que no puedo capturar cuando el puntero/pinche en el mapa se mueve, por ende, no puedo capturar la coordenadas...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Pragma" content="no-cache" />
<style type="text/css">
label{
width: 70px;float:left;
padding-top: 3px;
}
</style>
<script src="assets/js/jquery-1.11.js"></script>
<script type="text/javascript">
//Declaramos las variables que vamos a user
var lat = null;
var lng = null;
var map = null;
var geocoder = null;
var marker = null;
jQuery(document).ready(function() {
//obtenemos los valores en caso de tenerlos en un formulario ya guardado en la base de datos
lat = jQuery('#lat').val();
lng = jQuery('#long').val();
//Asignamos al evento click del boton la funcion codeAddress
jQuery('#pasar').click(function() {
codeAddress();
return false;
});
//Inicializamos la función de google maps una vez el DOM este cargado
initialize();
});
function initialize() {
geocoder = new google.maps.Geocoder();
//Si hay valores creamos un objeto Latlng
if (lat != '' && lng != '') {
var latLng = new google.maps.LatLng(lat, lng);
} else {
var latLng = new google.maps.LatLng(-25.3099006,-57.5942891);
}
//Definimos algunas opciones del mapa a crear
var myOptions = {
center: latLng, //centro del mapa
zoom: 13, //zoom del mapa
mapTypeId: google.maps.MapTypeId.ROADMAP //tipo de mapa, carretera, híbrido,etc
};
//creamos el mapa con las opciones anteriores y le pasamos el elemento div
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//creamos el marcador en el mapa
marker = new google.maps.Marker({
map: map, //el mapa creado en el paso anterior
position: latLng, //objeto con latitud y longitud
draggable: true //que el marcador se pueda arrastrar
});
//función que actualiza los input del formulario con las nuevas latitudes
//Estos campos suelen ser hidden
updatePosition(latLng);
}
//funcion que simplemente actualiza los campos del formulario
function updatePosition(latLng) {
jQuery('#lat').val(latLng.lat());
jQuery('#long').val(latLng.lng());
}
</script>
</head>
<body>
<form id="google" name="google" action="#">
<div id="map_canvas" style="width:800px;height:300px;"></div>
<br/>
<p><label>Latitud: </label><input type="text" readonly name="lat" id="lat"/></p>
<p><label> Longitud:</label> <input type="text" readonly name="lng" id="long"/></p>
</form>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key={borrado_por_seguridad}"></script>
</body>
</html>
Alguien podría iluminarme diciendome que me falta para que funcione correctamente?
Gracias y Saludos :)