Currently, I am utilizing angular google maps in conjunction with the ionic framework to obtain coordinates when a user clicks on the map. Below is an example of how the directive is injected into the view:
<ui-gmap-google-map center="map.center" zoom="map.zoom" dragging="true" options="map.options" events="map.events"></ui-gmap-google-map>
Here is the relevant part of my controller:
angular.extend($scope,
$scope.map = {
center: {latitude: 53.902407, longitude: 27.561621 },
zoom: 15,
options: {
maxZoom: 16,
minZoom: 13,
styles: mapStyles.bright
},
events: {
click: function (mapModel, eventName, originalEventArgs) {
$log.info("user defined event: " + eventName, mapModel, originalEventArgs);
var e = originalEventArgs[0];
var lat = e.latLng.lat(),
lon = e.latLng.lng();
console.log('You clicked here ' + 'lat: ' + lat + ' lon: ' + lon);
//scope apply required because this event handler is outside of the angular domain
$scope.$apply();
}
}
});
The event section is essentially a replication from examples provided in the documentation. However, upon clicking the map, an error occurs. Clicking https://i.sstatic.net/UUrCu.png reveals the details of the error.
What could be causing this issue? Any insights are greatly appreciated!
UPD Strangely, $scope.map.events seems to be undefined despite being defined earlier in the code. The same error persists for all events. For instance, the following snippet:
events: {
tilesloaded: function (map) {
$scope.$apply(function () {
$scope.mapInstance = map;
$log.info('tiles loaded');
});
}
}
yields:
Uncaught TypeError: Cannot read property 'tilesloaded' of undefined
along with the corresponding stack trace in the console.