0

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

2 respuestas 2

2

Puedes agregarle un listener a tu mapa y capturar cuando el usuario cambie la posición del marcador, de esta manera:

function initMap(lat, lng, zoom) {
  // lat = 20.973276, lng = -89.624175, zoom = 12
  lat = typeof lat === 'undefined' ? -0.1767189 : lat;
  lng = typeof lng === 'undefined' ? -78.4809883 : lng;
  zoom = typeof zoom === 'undefined' ? 13 : zoom;

  var map = new google.maps.Map(document.getElementById("map"), {
    zoom: zoom,
    center: {
      lat: lat,
      lng: lng
    }
  });

  marker = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: {
      lat: lat,
      lng: lng
    }
  });
  
  // Agregamos el listener para capturar el click y movimiento del marcador
  marker.addListener("click", function() {
    if (marker.getAnimation() !== null) {
      marker.setAnimation(null);
    } else {
      marker.setAnimation(google.maps.Animation.BOUNCE);
    }
  });
  
  // Capturamos cuando la posición del marcador cambie y realizamos la acción que se requiera
  google.maps.event.addListener(marker, "position_changed", function() {

    var lat = marker.getPosition().lat();
    var lng = marker.getPosition().lng();

    console.log('Latitude: ' + lat);
    console.log('Longitude: ' + lng);

  });
}
initMap();
<div id="map" style="width: 100%; height: 200px;"></div>
<script src='https://maps.googleapis.com/maps/api/js'></script>

0

Se puede utilizando un listener, puedes dar clic aquí para ver la documentación. Lo que yo recomiendo es capturar la ubicación al dar clic sobre el lugar deseado. Lo puedes realizar de esta forma (es un ejemplo básico pero completamente funcional para lo que necesitas):

CSS:

#map {
  height: 550px;
  width: 450px;
}

HTML:

 <!-- en los asteriscos va el API KEY -->
 <script async defer
src="https://maps.googleapis.com/maps/api/js?key=***************&callback=initMap">
<div id="map"></div>

JavaScript:

function initMap() {
    // Hacer set up del mapa
    var centro = {lat: 40.758899, lng: -73.9873197};
    map = new google.maps.Map(document.getElementById('map'), {
       center: centro,
       zoom: 15,
       streetViewControl: false
    });

    // listener que capta el click en el mapa
    google.maps.event.addListener(map, 'click', function(event) {
       var latmh = event.latLng.lat();
       var lngmh = event.latLng.lng();
       // ponemos un marcador donde se hace click
       var marker = new google.maps.Marker({
           position: event.latLng,
           map: map
       });

      console.log(latmh+" vvv "+lngmh);
    }); 
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.