dylanfprice / angular-gm

AngularJS Google Maps Directives
MIT License
197 stars 47 forks source link

Is it possible to close an infoWindows at a specific location using markerEvents? #39

Closed jannisg closed 9 years ago

jannisg commented 10 years ago

Love this module, thanks a bunch for maintaining it!

One thing I'm currently struggling with is closing an infoWindow only when needed but not always.

Let me explain:

  1. I have multiple markers, each marker object has a "type" property which is used for filtering map markers.
  2. I have a list of the available marker types and upon clicking on I set all the non-matched markers to { visible: false } to hide them thus only leaving the ones with matching type property on the map.

Now what I would like to do is this: When I filter the markers, say "Show all Cafés" and I currently have an infoWindow open on a Café that would remain visible I do not want to close its infoWindow.

If I have an infoWindow open on a Supermarket however, that infoWindow should be closed as its marker gets hidden.

What I'm struggling with is the conditional removal/hiding of the infoWindow.

I've basically followed the instructions from #20 to set up a custom event which then fires infoWindow.close() however this closes all infoWindows regardless of the locations array I pass in (which filters out the one I want to leave open).

Any ideas on how to only remove an infoWindow matching the location passed into the locations property when triggering a markerEvent would be much appreciated.

Code samples below:

Markers

<gm-markers
  gm-objects="map.markers"
  gm-get-lat-lng="{ lat: object.location.lat, lng: object.location.lng }"
  gm-get-marker-options="getMarkers(object)"
  gm-events="map.markerEvents"
  gm-on-click="mapSelection = object; infoWindow.open(marker.map, marker);"
  gm-on-closeinfo="mapSelection = null; infoWindow.close();"
></gm-markers>

Filter List

<ul class="nav--map">
  <li class="nav__item" ng-repeat="item in map.types">

    <a ng-class="{ active: map.selectedType == item.type }"
       ng-click="updateFilter( item.type, $event )"
       href="#" class="nav__link">

        <i class="typcn-{{ item.iconClass }}"></i>

    </a>

  </li>
</ul>

Marker Event related JS functions

/**
 * Sets the $scope.map.selectedType variable.
 * This in response triggers the $watch below.
 *
 * @param  {string} val The type of the marker.
 * @param  {bject}  e   The event object of the click handler.
 */
$scope.updateFilter = function( val, e ) {
  e.preventDefault();
  $scope.map.selectedType = ( $scope.map.selectedType === val ? null : val );
};

/**
 * Closes any open infoBoxes.
 *
 * @param  {object} markers The original marker array.
 */
$scope.closeOverlay = function( markers ) {
  // Loop through all markers and generate a map coordinates array.
  var locations = [];

  angular.forEach( markers, function(marker) {
    // Only add marker location for markers that do not match our current
    // $scope.map.selectedType filter value.
    if ( $scope.map.selectedType !== marker.type ) {
      this.push( angulargmUtils.objToLatLng( marker.location ) );
    }
  }, locations);

  // NOTE: At this stage, locations correctly only
  // has 2 coords (out of 3 markers) in its array.

  // Trigger Events on all markers matching the coordinates in `locations`.
  $scope.map.markerEvents = [
    {
      event: 'closeinfo',
      locations: locations
    }
  ];
};

/**
 * Watches the $scope.map.selectedType for changes and in response triggers
 * a redraw of the Google Map markers.
 */
$scope.$watch('map.selectedType', function(nu, old) {
  if ( nu !== old ) {
    // Close open infoWindows
    $scope.closeOverlay( $scope.map.markers );
    // Redraw Map Markers
    $scope.$broadcast('gmMarkersRedraw', 'map.markers');
  }
});
intellix commented 10 years ago

actually, this is what I'm after as well. My use case is that once the user places a marker on the map he gets an info window to confirm the placement is correct. Clicking either yes or no buttons should close the window and do something else. I tried events like 'closeinfowindow'.

dylanfprice commented 10 years ago

hmm would one of you mind making a jsfiddle or plunker demonstrating the issue? Much easier to figure out what's wrong that way.

dylanfprice commented 9 years ago

No response in almost a year--closing.