CODEWITHSUNDEEP
javascriptangularjsgoogle-mapsgoogle-maps-api-3angular-google-maps
jackdaw
jackdaw

Reputation: 2314

Hiding all info windows on click with angular-google-maps

I am using the angular google maps api defined here: https://angular-ui.github.io/angular-google-maps/#!/api

I have the following DOM structure

<ui-gmap-markers models="destinationMarkers" coords="'self'" idKey='self.idkey' >
    <div ui-gmap-windows models="destinationMarkers" control="infoWindows">
        <div ng-non-bindable>
            <!-- {{contents}} -->
        </div>
    </div>
</ui-gmap-markers>

I am trying to make it so that the info window closes when any other part of the map is clicked on, or when another window is opened. The closest I have gotten is calling: scope.infoWindows.getChildWindows() which gives access to the marker objects, however calling the associated hideWindow functions appears to do nothing. Does anyone know how to do this?

Upvotes: 2

Views: 1377

Answers (1)

Tim Smart
Tim Smart

Reputation: 178

I have just come across exactly the same issue and after a little messing around i have a solution (sorry if im a little late to the game)

You must set the controller property on the window like so...

<ui-gmap-window ng-if="m.response" control="googlemap" >

The 'googlemap' control must be a member of the Scope, and 'control' must be defined as an empty object on the map object like so...

$scope.googlemap = {};

$scope.map = {
    zoom: 5,
    center: getMapCenter(response),
    options: {
        // draggable: false
    },
    control: {}
};

Now we can attach an event to the Marker which will enable us to iterate over the list of windows and hide them like so...

markers.push({
    id: i,
    ...
    ...
    events: {
        click: function(e){
            var windows = $scope.googlemap.getChildWindows();

            for (var i = 0; i < windows.length; i++){
                windows[i].hideWindow()
            }
        }
    }
});

Upvotes: 4

Related Questions