Get Cordinates on mouse click on google map api v3 and angularJS

Question

$scope.map = {
    center: {
        latitude: 36,
        longitude: -80
    },
    zoom: 3,
    showOverlay: true,
    events: {
        "click": function ()
        { console.log(" latitude: " + $scope.map.center.latitude + "longitude: " + $scope.map.center.longitude); }
    },
    options: {
        streetViewControl: false,
        panControl: false,
        maxZoom: 20,
        minZoom: 1,

    }
}

So I have a problem to get the longitude and latitude of my mouse click event using angularJS and the google map api v3. Here is an example of my controller. I've added an event to the map so to get the cordinates, but now what i'm getting is just the cordinates of the center. I don't have any idea how to get the exact cordinates of my mouse click event. Thanks for your help.

Answer 1

You must implement a listener that catches the click and gets location:

google.maps.event.addListener(map, 'click', function(event) {
    alert(event.latLng);  // in event.latLng  you have the coordinates of click
});

Check this DEMO FIDDLE

Answer 2

The click event in Angular and google maps v3 returns three objects: instance, eventName, handler.

The third one has latLong with lat(), lng() functions.

So you can get latitude by handler[0].latLng.lat().

There is also a useful pixel object with position attributes x,y of the clicked point.