I am trying to open an info window when a user clicks on a marker on the map or when a user clicks a location from a list of locations. The issue that I'm having is that I'm receiving an $apply already in progress error. The application still works fine, but according to the documentation, if I'm seeing this error, I'm doing something wrong. Here are the two bits of code that I'm dealing with.
This first function places the markers on the map and responds to click marker click events.
var placeMarker = function(center) {
var marker = new google.maps.Marker({
map : map,
position : new google.maps.LatLng(center.location.latitude, center.location.longitude)
});
var infoWindow = new google.maps.InfoWindow();
marker.center = center;
$scope.markers.push(marker);
google.maps.event.addListener(marker, "click", function() {
if ($scope.openInfoWindow) {
$scope.openInfoWindow.close();
}
$scope.center = marker.center;
if (!$scope.compiled) {
var content = '<div id="infowindow_content" ng-include src="\'/infowindow.html\'"></div>';
$scope.compiled = $compile(content)($scope);
}
$scope.$apply();
infoWindow.setContent($scope.compiled[0].innerHTML);
infoWindow.open(map, marker);
$scope.openInfoWindow = infoWindow;
});
};
The second function here is what accepts an event from somewhere else in the application and sends a google maps click event to the marker that I'd like to open.
$scope.$on("app:ResultListSelection", function(event, providerNumber) {
for (var i = 0, length = $scope.markers.length; i < length; i += 1) {
var center = $scope.markers[i].center;
if (providerNumber === center.providerNo) {
google.maps.event.trigger($scope.markers[i], "click");
break;
}
}
});
The $apply already in progress error occurs when I trigger a google maps click event on the marker.
Does anyone have any idea what I might be doing wrong?
I know there is probably a better way to do this, but I ended up adding underscore.js to my project and used underscore to compile the template while passing the data in.
var template = _.template($("#infoWindowTmpl").html()),
compiled = template($scope);
var infoWindow = new google.maps.InfoWindow({
content : compiled
});