section, I am encountering an issue with a click event that I have connected to a Google Maps info window using an <a> tag. Strangely, it seems that the function is not being triggered even though it shows as activated.
I attempted to rectify this by adding ng-app="" and ng-controller="", but unfortunately, my efforts were unsuccessful.
.controller('mainCtrl', function($scope, $rootScope, $stateParams,
uiGmapGoogleMapApi, $cordovaGeolocation, $state, $firebase,
$ionicModal) {
var createMap = function(position){
angular.extend($scope, {
map: {center: {latitude: position.coords.latitude,longitude:position.coords.longitude},
zoom: 13,
markers: markersarray,
options: {
// This is an example of a variable that cannot be placed outside of uiGmapGooogleMapApi without forcing of calling the google.map helper outside of the function
streetViewControl: false,
mapTypeControl: false,
scaleControl: false,
rotateControl: false,
zoomControl: false
},
events: {
click: function (map, eventName, originalEventArgs) {
var e = originalEventArgs[0];
Marker_Latt = e.latLng.lat();
Marker_Long = e.latLng.lng();
$scope.openModal();
}
},
markersEvents: {
click: function(marker, eventName, model, args) {
for(var i = 0; i < markersarray.length; i++){
if(markersarray[i].id === marker.key){
var content = '';
content += '<div ng-app="main" ng-controller="mainCtrl"><p>Added By: <a style="cursor: pointer;" [routerLink]="" (click)="navigatetoUser()">'+markersarray[i].username+'</a></p>';
content += '<p>Added On: ' + markersarray[i].date.toString() + "</p></div>";
navigateUserID = markersarray[i].userid;
createWindow(marker.get('map'), marker, content);
break;
}
}
},
dblclick:function(marker, eventName, model, args) {
console.log("double click!" + marker);
}
},
}
} );
};
$scope.navigatetoUser = function(){
console.log("button clicked..");
//$scope.data.selectedUserID = navigateUserID;
//$state.go('userProfile', $scope.data);
};
function createWindow(map, marker, content){
var infowindow = new google.maps.InfoWindow({
content: content
});
infowindow.open(map, marker);
}
});
The navigatetoUser() function does not seem to be triggered, and I am unable to locate any errors in the code.
In the original code snippet:
<ui-gmap-window isiconvisibleonclick="true">
<p> {{CurrentMakerTitle}}
<a href="" ng-click="$root.navigatetoUser()">
{{CurrentMakerUserName}}
</a>
<br>{{CurrentMakerDateAdded}}
</p>
</ui-gmap-window>
</ui-gmap-marker>
I made alterations by changing it to infowindow since multiple windows tend to display the last-clicked information.