Recuperar latitud y longitud de un pin que se puede arrastrar a través de Google Maps API V3

Lo explicaré. Logré tener un pin que se pueda arrastrar en un mapa. Quiero recuperar las coordenadas de este punto y ponerlas en dos campos: Latitud y Longitud. Estas coordenadas se enviarán luego a una tabla SQL vía PHP. Aquí hay un ejemplo de lo que pretendo hacer, pero en lugar de varios pines, es solo uno y es arrastrable. El problema es: ni siquiera puedo mostrar las coordenadas del punto inicial. Y, por supuesto, cuando el usuario mueve el pin, quiero que las coordenadas también cambien en los campos. Espero haber sido claro. ¿Qué hice mal? ¿Debo usar el servicio de Geoencoding ?

Aquí va el JS:

 var map; function initialize() { var myLatlng = new google.maps.LatLng(40.713956,-74.006653); var myOptions = { zoom: 8, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var marker = new google.maps.Marker({ draggable: true, position: myLatlng, map: map, title: "Your location" }); google.maps.event.addListener(marker,'click',function(overlay,point){ document.getElementById("latbox").value = lat(); document.getElementById("lngbox").value = lng(); }); }  

Y el HTML:

   

Latitude:

Longitude:

Cualquiera de estos trabajos

 google.maps.event.addListener(marker, 'click', function (event) { document.getElementById("latbox").value = event.latLng.lat(); document.getElementById("lngbox").value = event.latLng.lng(); }); google.maps.event.addListener(marker, 'click', function (event) { document.getElementById("latbox").value = this.getPosition().lat(); document.getElementById("lngbox").value = this.getPosition().lng(); }); 

También puede considerar usar el evento dragend también

 google.maps.event.addListener(marker, 'dragend', function (event) { document.getElementById("latbox").value = this.getPosition().lat(); document.getElementById("lngbox").value = this.getPosition().lng(); }); 

Mire la muestra del código oficial de la referencia de la API de Google Maps: http://gmaps-samples-v3.googlecode.com/svn/trunk/draggable-markers/draggable-markers.html

El código que realmente está funcionando es el siguiente:

 google.maps.event.addListener(marker, 'drag', function(event){ document.getElementById("latbox").value = event.latLng.lat(); document.getElementById("lngbox").value = event.latLng.lng(); }); 

Sería mejor si el mapa se puede volver a centrar una vez que se suelta el pin. Supongo que se puede hacer con map.setCenter() pero no estoy seguro de dónde debería ponerlo. Traté de ponerlo justo antes y después de este fragmento de código pero no funcionará.

Ejemplo de Google Maps V3. Este es un ejemplo de trabajo de un usuario que suelta un solo pin, reemplaza un pin caído con un nuevo pin, imágenes de pin personalizadas, pines que pueblan valores lat / long en un FORM CAMPO dentro de un DIV.

   

Latitude:

Longitude:

 google.maps.event.addListener(marker, 'dragend', function (event) { document.getElementById("latbox").value = this.getPosition().lat(); document.getElementById("lngbox").value = this.getPosition().lng(); }); 

funcionó bien para mí … Gracias …

Mira este violín

En el siguiente código, reemplace dragend con el evento que desee. En tu caso ‘clic’

 google.maps.event.addListener(marker, 'dragend', function (event) { document.getElementById("defaultLatitude").value = event.latLng.lat(); document.getElementById("defaultLongitude").value = event.latLng.lng(); }); 
  var zoomLevel = map.getZoom(); var pos = (event.latLng).toString(); $('#position').val(zoomLevel+','+pos); //set value to some input 

Ejemplo Run JsFiddle

prueba esto 🙂

      Manoj Sarnaik     

    Intereting Posts