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.

Jordi Castilla · Accepted Answer · 2015-03-31 08:56:59Z

13

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

edited Mar 31, 2015 at 8:56

answered Mar 31, 2015 at 8:50

Jordi Castilla

27.1k8 gold badges73 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ayyoub Over a year ago

That's working using Standard JS, but i'm using Controllers with AngularJS and it's not working like that, events are on my map but latLng is not defined and I think i can't get position like that.

Jordi Castilla Over a year ago

If you cant use javascript delete the tag from your question... if not, define the map with angularjs and use javascript to implement listeners...

Ayyoub Over a year ago

Thanks a lot man, I will try that and combine it with the github solution given by kiro112.

AK-101111 · Accepted Answer · 2016-03-04 11:37:00Z

1

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.

answered Mar 4, 2016 at 11:37

AK-101111

394 bronze badges

2 Comments

AK-101111 Over a year ago

any reason for the down vote? I've solved the exact problem asked with this solution.

mjwrazor Over a year ago

This should be the real answer,

Fida · Accepted Answer · 2016-10-08 21:19:55Z

0

If you are using angular why wont you use its directive for maps. ngMap

answered Oct 8, 2016 at 21:19

Fida

1,3581 gold badge12 silver badges21 bronze badges

3 Comments

mjwrazor Over a year ago

There are many directives for google maps. He is using a different directive. ngMap is not the only one.

Fida Over a year ago

He is actually not using any directives.. He is just putting Map info on the controller $scope.

mjwrazor Over a year ago

I am using Angular Google Maps and I have the exact same setup in my controller. A directive is in the HTML the logic is in the controller. NgMap uses names functions connected to their directive.

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related