How to get on-click coordinates on angular google maps? - angularjs

Question

I'm kind of a newb when it comes to AngularJS and Google's API for maps and I've been trying to get coordinates on click. I'm using this API.
I am getting an error: Uncaught TypeError: Cannot read property 'lat' of undefined
on "console.log(lat);" row
This is my angular controller:
app.controller("agencyController",['$scope', '$log','uiGmapGoogleMapApi', function($scope,$interval, GoogleMapApi){
markers = [],
angular.extend($scope, {
markeri : markers,
map : {
center: bgdcentar,
zoom:13,
options: {
mapTypeId : google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
streetViewControl: false,
styles: [{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#46bcec"},{"visibility":"on"}]}],
disableDoubleClickZoom: true,
scaleControl: true,
scrollwheel: true,
panControl: true,
streetViewControl: false,
draggable: true,
overviewMapControl: true,
},
events:{
rightclick: function(event){
var lat = event.latLng.lat();
var lng = event.latLng.lng();
console.log(lat);
console.log(lng);
console.log('Stan dodat!');
markers.push();
},
},
},
searchbox : {
template: 'searchbox.tpl.html',
events:{
places_changed: function(searchBox){
},
parentdiv: 'map_canvas'
}
},
});
}]);
And this is a part of my html, the code is included in the controller so don't worry about that:
<div id="map_canvas">
<ui-gmap-google-map center='map.center' zoom='map.zoom' options='map.options' events='map.events' >
<ui-gmap-search-box template="searchbox.template" events="searchbox.events"></ui-gmap-search-box> <!-- search-->
<ui-gmap-markers models="markeri" coords="'self'" icon="'icon'"></ui-gmap-markers> <!-- markeri -->
</ui-gmap-google-map>
</div>

Answer 1

You need to replace:
rightclick: function(event){
//...
}
with:
rightclick: function (map, eventName, events) {
var event = events[0];
//...
}
where
map refers to map object,
eventName - the name of event
events - the list of event listeners
Example
angular.module('appMaps', ['uiGmapgoogle-maps'])
.config(function(uiGmapGoogleMapApiProvider) {
uiGmapGoogleMapApiProvider.configure({
//key: ''
});
})
.controller("mainCtrl", ['$scope', '$log', 'uiGmapGoogleMapApi',
function($scope, $interval, GoogleMapApi) {
angular.extend($scope, {
markers: [],
markerNo: 1,
map: {
center: {
latitude: 42.3349940452867,
longitude: -71.0353168884369
},
zoom: 13,
options: {
},
events: {
rightclick: function(map, eventName, events) {
var event = events[0];
var lat = event.latLng.lat();
var lng = event.latLng.lng();
$scope.$apply(function() {
$scope.markers.push({
latitude: lat,
longitude: lng,
id: $scope.markerNo
});
$scope.markerNo++;
});
},
},
}
});
}
]);
.angular-google-map-container {
position: absolute;
width: 100%;
height: 240px;
}
<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="http://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script>
<div id="map_canvas" ng-app="appMaps" ng-controller="mainCtrl">
<ui-gmap-google-map center='map.center' zoom='map.zoom' options='map.options' events='map.events'>
<ui-gmap-markers models="markers" coords="'self'" icon="'icon'"></ui-gmap-markers>
</ui-gmap-google-map>
</div>