google maps api 3 - georreferenciación - Recuperar latitud y longitud de un pin que se puede arrastrar a través de Google Maps API V3
google.maps.marker example (8)
prueba esto :)
<!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&v=2&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>
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 Geocoding ?
Aquí va el 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 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>
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();
});
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>
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á.
Mira este fiddle
En el siguiente código, reemplace dragend con el event 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();
});
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
var zoomLevel = map.getZoom();
var pos = (event.latLng).toString();
$(''#position'').val(zoomLevel+'',''+pos); //set value to some input
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 ...