Skip to main content
título editado
Enlace
Rene Limon
  • 4.6k
  • 2
  • 22
  • 34

Capturar movimiento de puntero - GMapsen Google Maps

Origen Enlace
KuroNeko
  • 352
  • 2
  • 14

Capturar movimiento de puntero - GMaps

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 :)