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

Voy a 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í está an example 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 Geocoding?Recuperar latitud y longitud de un pin que se puede arrastrar a través de Google Maps API V3

Aquí va la JS:

<script type="text/javascript"> 
    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(); 
    }); 

} 
</script>

Y el código HTML:

<html> 
<body onload="initialize()"> 

    <div id="map_canvas" style="width:50%; height:50%"></div> 

    <div id="latlong"> 
    <p>Latitude: <input size="20" type="text" id="latbox" name="lat" ></p> 
    <p>Longitude: <input size="20" type="text" id="lngbox" name="lng" ></p> 
    </div> 

</body> 
</html>

Fuente

2011-05-11 Macxim

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 utilizar 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(); 
});

Fuente

2011-05-12 06:50:46 richie

Hey, gracias, en realidad he resuelto este problema por mí mismo ayer con el mismo código exacto que p rovided. Así que estoy feliz de haber podido obtener el mismo resultado. Iba a responder mi pregunta ayer, pero StackOverFlow no me lo permitió. Aparentemente no puedo responder mi propia pregunta antes de las 8 horas (Nuevo usuario). Eso es lo que me dijeron.De todos modos, gracias por tu respuesta. – Macxim

El código que está trabajando realmente 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 podría ser re-centrado una vez se deja caer el pasador. Supongo que se puede hacer con map.setCenter(), pero no estoy seguro de dónde debo ponerlo. Traté de ponerlo justo antes y después de este fragmento de código pero no funcionará.

Fuente

2011-05-12 10:13:28 Macxim

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.

<html> 
<body onLoad="initialize()"> 

    <div id="map_canvas" style="width:50%; height:50%"></div> 

    <div id="latlong"> 
    <p>Latitude: <input size="20" type="text" id="latbox" name="lat" ></p> 
    <p>Longitude: <input size="20" type="text" id="lngbox" name="lng" ></p> 
    </div> 

</body> 
</html> 

<cfoutput> 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=#YOUR-GOOGLE-API-KEY#&sensor=false"></script> 
</cfoutput> 

<script type="text/javascript"> 
//<![CDATA[ 

    // global "map" variable 
    var map = null; 
    var marker = null; 

    // popup window for pin, if in use 
    var infowindow = new google.maps.InfoWindow({ 
     size: new google.maps.Size(150,50) 
     }); 

    // A function to create the marker and set up the event window function 
    function createMarker(latlng, name, html) { 

    var contentString = html; 

    var marker = new google.maps.Marker({ 
     position: latlng, 
     map: map, 
     zIndex: Math.round(latlng.lat()*-100000)<<5 
     }); 

    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.setContent(contentString); 
     infowindow.open(map,marker); 
     }); 

    google.maps.event.trigger(marker, 'click');  
    return marker; 

} 

function initialize() { 

    // the location of the initial pin 
    var myLatlng = new google.maps.LatLng(33.926315,-118.312805); 

    // create the map 
    var myOptions = { 
     zoom: 19, 
     center: myLatlng, 
     mapTypeControl: true, 
     mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, 
     navigationControl: true, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    // establish the initial marker/pin 
    var image = '/images/googlepins/pin2.png'; 
    marker = new google.maps.Marker({ 
     position: myLatlng, 
     map: map, 
     icon: image, 
     title:"Property Location" 
    }); 

    // establish the initial div form fields 
    formlat = document.getElementById("latbox").value = myLatlng.lat(); 
    formlng = document.getElementById("lngbox").value = myLatlng.lng(); 

    // close popup window 
    google.maps.event.addListener(map, 'click', function() { 
     infowindow.close(); 
     }); 

    // removing old markers/pins 
    google.maps.event.addListener(map, 'click', function(event) { 
     //call function to create marker 
     if (marker) { 
      marker.setMap(null); 
      marker = null; 
     } 

     // Information for popup window if you so chose to have one 
     /* 
     marker = createMarker(event.latLng, "name", "<b>Location</b><br>"+event.latLng); 
     */ 

     var image = '/images/googlepins/pin2.png'; 
     var myLatLng = event.latLng ; 
     /* 
     var marker = new google.maps.Marker({ 
      by removing the 'var' subsquent pin placement removes the old pin icon 
     */ 
     marker = new google.maps.Marker({ 
      position: myLatLng, 
      map: map, 
      icon: image, 
      title:"Property Location" 
     }); 

     // populate the form fields with lat & lng 
     formlat = document.getElementById("latbox").value = event.latLng.lat(); 
     formlng = document.getElementById("lngbox").value = event.latLng.lng(); 

    }); 

} 
//]]> 

</script>

Fuente

2012-07-19 18:41:32

¿Cómo puedo mostrar ambas coordenadas en una sola forma? Me gusta (-10.00000, 10.00000)? –

Mira el ejemplo de código oficial de Google Maps API de referencia: http://gmaps-samples-v3.googlecode.com/svn/trunk/draggable-markers/draggable-markers.html

Fuente

2013-04-13 03:36:22

enlace roto .... – bobmoff

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 ..

Fuente

2014-10-17 14:19:35

Marque esta fiddle

En el El siguiente código reemplaza a dragend con el event que desee. En su caso 'clic'

google.maps.event.addListener(marker, 'dragend', function (event) { 
    document.getElementById("defaultLatitude").value = event.latLng.lat(); 
    document.getElementById("defaultLongitude").value = event.latLng.lng(); 
});

Fuente

2014-11-29 13:04:24

var zoomLevel = map.getZoom(); 
    var pos = (event.latLng).toString(); 

    $('#position').val(zoomLevel+','+pos); //set value to some input

Example Run JsFiddle

Fuente

2015-04-16 16:24:54

-1

probar este :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- 
develop by manoj sarnaik 
--> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Manoj Sarnaik</title> 
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxSPW5CJgpdgO_s4yyMovOaVh_KvvhSfpvagV18eOyDWu7VytS6Bi1CWxw" 
     type="text/javascript"></script> 
    <script type="text/javascript"> 

    var map = null; 
    var geocoder = null; 

    function initialize() { 
     if (GBrowserIsCompatible()) { 
     map = new GMap2(document.getElementById("map_canvas")); 
     map.setCenter(new GLatLng(20.236046, 76.988255), 1); 
     map.setUIToDefault(); 
     geocoder = new GClientGeocoder(); 
     } 
    } 

    function showAddress(address) { 
     if (geocoder) { 
     geocoder.getLatLng(
      address, 
      function(point) { 
      if (!point) { 
       alert(address + " not found"); 
      } else { 
       map.setCenter(point, 15); 
       var marker = new GMarker(point, {draggable: true}); 
       map.addOverlay(marker); 
       GEvent.addListener(marker, "dragend", function() { 
       marker.openInfoWindowHtml(marker.getLatLng().toUrlValue(6)); 
       }); 
       GEvent.addListener(marker, "click", function() { 
       marker.openInfoWindowHtml(marker.getLatLng().toUrlValue(6)); 
       }); 
      GEvent.trigger(marker, "click"); 
      } 
      } 
     ); 
     } 
    } 
    </script> 
    </head> 

    <body onload="initialize()" onunload="GUnload()"> 
    <form action="#" onsubmit="showAddress(this.address.value); return false"> 

     <p> 
     <input type="text" style="width:350px" name="address" value="Malegaon,washim" /> 
     <input type="submit" value="Go!" /> 
     </p> 
     <div id="map_canvas" style="width: 600px; height: 400px"></div> 
    </form> 

    </body> 
</html>

Fuente

2015-08-11 12:14:25

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

Respuesta

Cuestiones relacionadas