Question

I am using the google maps jquery google maps.
What i intend to do is, ask the user to click on a position on the map and then get his
geolocation, data based on the point on the map that he has clicked.

I try the following snippet:

$('#mapCanvas').gmap('click', function(overlay, latlng){
  if (latlng) {
    alert("here");
    marker = new GMarker(latlng, {draggable:true});
    var latlng = marker.getLatLng();
    var lat = latlng.lat();
    var lng = latlng.lng();
    //send these lat and lng to server side save location method through ajax
    console.log(latlng);
  }
  map.addOverlay(marker);
}); 

But this does not work, could someone please tell me what is wrong?
A fiddle can be found here.

Thanks!

Answer 1

To capture events, google.maps.event.addListener is usually used. For example, to capture when a user clicks on the maps, you can do this:

google.maps.event.addListener(map, 'click', function(event) {
  alert(event.latLng);
});

The click event in google.maps.Map triggers a MouseEvent, which has a latLng property. This tells you where on the map the user clicked. Similarly, google.maps.Marker behaves the same way, and it tells you where the clicked marker is on the map.

Combining these two things, we can create an application where markers can be added by clicking on the map, and their locations can be obtained by clicking on the markers:

google.maps.event.addListener(map, 'click', function(event) {

  // add a marker where the mouse clicked
  var marker = new google.maps.Marker({
    position: event.latLng,
    map: map
  });

  // when the marker is clicked, alert its location
  google.maps.event.addListener(marker, 'click', function(event) {
    alert('This marker is at: ' + event.latLng);
  });

});

Working example: http://jsfiddle.net/aLEjR/1/

---

By the way, if you already have an instance of google.maps.Marker (e.g. if you created that marker yourself), you can get its position by calling the getPosition() method. You can read the API documentation about that method and many others here:

• https://developers.google.com/maps/documentation/javascript/reference

You can always learn more about how to use the Google Maps API by reading the Developer’s Guide:

• https://developers.google.com/maps/documentation/javascript/tutorial