2011-10-26 20 views
56

Tengo 2 cuadros de texto para lat y lon cuando un usuario ingresa un nuevo registro a la base de datos.Google Maps API 3: Obtener coordenadas del clic derecho

Tengo una vista previa en vivo de Google Maps que funciona muy bien, ahora lo que quiero hacer es agregar un evento con el botón derecho sobre el mapa que rellena los cuadros de texto lat/lon con la coordinada.

¿Esto es posible?

Sé cómo agregar el detector de eventos, y revisé los documentos API, pero no vi nada que haga esto. Sé que puedes hacerlo en el mapa de Google en su sitio web.

+0

Creo que he encontrado algo, el fromDivPixelToLatLng se ve bien .. Voy a experimentar y repost la solución si funciona – guyfromfl

Respuesta

151
google.maps.event.addListener(map, "rightclick", function(event) { 
    var lat = event.latLng.lat(); 
    var lng = event.latLng.lng(); 
    // populate yor box/field with lat, lng 
    alert("Lat=" + lat + "; Lng=" + lng); 
}); 
+1

Lol, pasé casi la mitad del día la escritura de código, y justo revisado, eliminado porque esto es exactamente eso. ¡¡¡Gracias!!! – guyfromfl

+0

¿cómo se puede obtener el marcador al que se hizo clic? al almacenarlos en una matriz? – AndreaCi

+1

Mismo código, pero cambiar "clic con el botón derecho" para "hacer clic" lo hace funcionar con el botón izquierdo. También puede ver todos los eventos en vivo aquí: https://developers.google.com/maps/documentation/javascript/events – Seoman

3

Se puede crear un objeto InfoWindow (class documentation here) y agregar a dicho manejador rightclick caso de que se rellenará con la latitud y longitud de la ubicación se hace clic en el mapa.

function initMap() { 
 
    var myOptions = { 
 
     zoom: 6, 
 
     center: new google.maps.LatLng(-33.8688, 151.2093) 
 
    }, 
 
    map = new google.maps.Map(document.getElementById('map-canvas'), myOptions), 
 
    marker = new google.maps.Marker({ 
 
     map: map, 
 
    }), 
 
    infowindow = new google.maps.InfoWindow; 
 
    map.addListener('rightclick', function(e) { 
 
    map.setCenter(e.latLng); 
 
    marker.setPosition(e.latLng); 
 
    infowindow.setContent("Latitude: " + e.latLng.lat() + 
 
     "<br>" + "Longitude: " + e.latLng.lng()); 
 
    infowindow.open(map, marker); 
 
    }); 
 
}
html, 
 
body { 
 
    height: 100%; 
 
} 
 
#map-canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAIPPUQ0PSWMjTsgvIWRRcJv3LGfRzGmnA&callback=initMap" async defer></script> 
 
<div id="map-canvas"></div>

Cuestiones relacionadas