CODEWITHSUNDEEP
google-maps-api-3jquery-ui-map
Dilini Rajapaksha
Dilini Rajapaksha

Reputation: 2708

How to get latitude and longitude on click event with jquery-ui-map

When using 'Google maps v3 plugin for jQuery and jQuery Mobile', how to retrieve the latitude and longitude values under the mouse pointer when clicked on the map?

Upvotes: 3

Views: 6046

Answers (3)

0x77
0x77

Reputation: 21

johansalllarsson's solution works great for me, so here is my sample of code:

<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<script src="js/jquery.ui.map.full.min.js" type="text/javascript"></script> 
<script type="text/javascript">
$(function() {
    $('#map').gmap();
    $($('#map').gmap('get', 'map')).dblclick(function(event) {
        alert(event.latLng);
    });
});
</script>

Upvotes: 2

johansalllarsson
johansalllarsson

Reputation: 927

$($('#map_canvas').gmap('get', 'map')).click(function(event) {
    console.log(event.latLng);
});

see http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-geocoding.html

Upvotes: 1

Dilini Rajapaksha
Dilini Rajapaksha

Reputation: 2708

Even though the click event listener is already added to the map inside the plugin, the event object returned, does not give the latLng value. Adding the click event listener to the map object from my code, worked for me (found the solution by referring this answer).

var map = $('#map_canvas').gmap('get', 'map');
$(map).addEventListener('click', function(event) {
    alert(event.latLng);
});

Upvotes: 3

Related Questions