Combine clusters with windows in a clean fashion?

[netsensei]

Hello,

I'm looking at this use case:

• Markers need to be (un)clustered on different zoom levels
• When you click on an individual marker, you need to see a popup with detailed info.

(The info is hooked to the marker object through the controller scope on init.)

Problem: how do I approach this with the directives I have available? Can I do something like this? (pseudocode)

<markers models="map.Markers" coords="'self'" doCluster="true">
  <windows>
      <div class="storePopup">
          <h2> {{marker.name}}</h2>
         <p>{{marker.line}}</h2>
       </div>
   </windows>
</markers>

With this code, the clustering works, but the info popups don't work.
name and line are a custom properties set from the parent controller.

Either:
I could go with the 'marker' directive with ng-repeat + window directive instead, which will make work perfectly, but then I won't be able to use the clustering.

Or:
I can use the markers directive, but I don't really see how this could be combined with window or windows to make those popups work.

Any ideas?

Thanks!

[nmccready]

To avoid confusion are you trying to show popups(infoWindows) on clusters or on the markers themselves.

[netsensei]

Found it. Or so it would seem.

This is actually a dupe of #249

It's a matter of scope (what else is new :p): {{marker.name}} should not bound in the parent controller but dynamically in the scope of the windows directive. To achieve this, you need to use the ng-non-bindable directive to prevent binding in the parent scope.

This does work:

<markers models="map.Markers" coords="'self'" doCluster="true">
  <windows>
      <div class="storePopup" ng-non-bindable>
          <h2> {{marker.name}}</h2>
         <p>{{marker.line}}</h2>
       </div>
   </windows>
</markers>

I think this needs to be added to the documentation. Spend the odd couple of hours to find this missing piece of info.

Thanks!

[netsensei]

nmccready: popups on the markers themselves. Not on the clusters.

[nmccready]

Also in markers marker.["whateverprop"] is invalid. It should be just {{name}} and {{line}}. Also Windows needs to know how to be shown. So it is via click or via show. So show could be set to show="'show'" .

Honestly it is way easier to avoid windows all together unless you need to show all the windows at once. The examples provided in the repo have all this shown.

[nmccready]

See this old issue (#83) where the markers (and windows) directive were invented. Search for "epiphany"

[netsensei]

Agreed.

I think this is a bit convoluted.

So, how about this?

<window ng-repeat="m in map.Markers">
      <div class="storePopup">
          <h2> {{m.name}}</h2>
         <p>{{m.line}}</h2>
       </div>
 </window>

<markers models="map.Markers" coords="'self'" doCluster="true"></markers>

[netsensei]

Owww! Right... I see now! :-D 👍

[cthrax]

Trying to clean up issues, if this still exists, please re-open with a plnkr demonstrating the issue.