-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Closing Info Window prevents them from opening again on same marker #548
Description
I've defined a reuseable window directive that I show and hide based on map interaction with my markers and polygons.
<window
show="addressInfo.show"
coords="addressInfo.coords"
>
<div class="outage-info" ng-controller='OutageMapController' >
<h3>{{addressInfo.header}}</h3>
...
</div>
</window>
When the map registers a click event on the marker I populate the addressInfo and show the window over the marker. Markers are created using the controller and standard javascript API calls. When the user clicks off the window or on another marker I hide the first window by setting $scope.addressInfo.show = false, and move and re-show the window if they clicked on a different marker. This works fine and allows for the window to be reopened. However, if the user clicks the 'x' button in the info window they cannot open it again if they interact with the same map object. If they click on another object the window opens just fine. If they click on the first object again after doing so, the window opens just fine. It is only when they close the window and try to open the window again in the same location that it stops working.
I'm thinking of just hiding the close button (is that possible through the API?), as I don't need it with the click-off the window feature for closing.
Edit: Markers are created in the controller as follows:
function addAddress(address) {
var position = toLatLng(address.latitude, address.longitude);
var marker = new google.maps.Marker({
position: position,
icon: 'images/home.png'
});
$scope.infoListener = google.maps.event.addListener(marker, 'click', function (e) {
//alert the index of the polygon
$scope.safeApply(function () {
$scope.addAddressInfoWindow(address, position);
});
});
marker.setMap($scope.mapObject);
}
$scope.addAddressInfoWindow = function(address, position, marker) {
// Allow only one info box to be open
clearInfo();
$scope.addressInfo = {
coords: {
latitude: position.lat(),
longitude: position.lng()
},
header: address.name,
show: true,
account: address.account
};
}
// Clears the three info windows that may be opened. They are created similarly to address,
// but contain different layouts and information
function clearInfo() {
$scope.outageInfo.show = false;
$scope.addressInfo.show = false;
$scope.searchInfo.show = false;
}