cannot display google map markers in clusters with jade-angularjs

[abbood]

intro:

I initially set up a rails application that managed the asset pipeline and installed the angular-google-maps dependency (see gemfile). I used slim for the html, and this is the code I had to display the angular-google-maps directive:

div (ng-controller="PropertyListCtrl")
  google-map center="map.center" zoom="map.zoom" draggable="true" dragging="map.dragging" bounds="map.bounds" events="map.events" options="map.options" pan="true" control="map.control"
    markers models="map.markers" icon="'icon'" labelContent="'title'" labelAnchor="22 0" coords="'self'" doCluster="true" clusterOptions="map.clusterOptions" click="'onClicked'"

this is the angular coffee script that fills it up (i didn't bother including the whole thing here b/c i've confirmed that it's not the cause of the problem).

Anyways, so I decided to separate the backend from the front end, with rails being the server side and an angular app for the client side. I used brunch to build my project with the angular-brunch-seed skeleton.

problem:

for some reason I can't render the markers in cluster mode in this new stack. this is the jade code I got:

div(ng-controller="PropertyListCtrl")
  google-map(center="map.center",zoom="map.zoom",draggable="true",dragging="map.dragging",bounds="map.bounds",events="map.events",options="map.options",pan="true",control="map.control")
    markers(models="map.markers",icon="'icon'",labelContent="'title'",labelAnchor="22 0",coords="'self'",doCluster="true",clusterOptions="map.clusterOptions",click="'onClicked'")

trouble shooting:

a) using the same coffee script code, i was able to render the markers individually on the new stack (ie using this code):

google-map(center="map.center",zoom="map.zoom",draggable="true",dragging="map.dragging",bounds="map.bounds",events="map.events",options="map.options",pan="true",control="map.control")
  marker(ng-repeat='m in map.markers', coords='m', icon='m.icon', click='onMarkerClicked(m)')
      marker-label(content='m.title', anchor='22 0')

but as soon as I replace the marker directive with the markers one.. nothing displays.. I believe that's sufficient enough to show that this problem has nothing to do with the coffeescript

b) my brunch stack (see the config.coffee file) precompiles the jade files and turns them into html and dumps all of that in a partials file. This is what the relevant generated code looks like:

.run(['$templateCache', function($templateCache) {
  return $templateCache.put('/partials/map.html', [
'',
'<div class="container">', 

.. // lots of stuff

'  <div ng-controller="PropertyListCtrl">',
'    <google-map center="map.center" zoom="map.zoom" draggable="true" dragging="map.dragging" bounds="map.bounds" events="map.events" options="map.options" pan="true" control="map.control">',
'      <markers models="map.markers" icon="\'icon\'" labelContent="\'title\'" labelAnchor="22 0" coords="\'self\'" doCluster="true" clusterOptions="map.clusterOptions" click="\'onClicked\'"></markers>',
'    </google-map>',
'  </div>',
'</div>',''].join("\n")); 

I'm wondering if its this concatenation (or adding the \ escape characters) that's confusing angular-google-maps. But i'm not sure how to debug or fix that.

c) although the documentation in angular-google-maps doesn't ask for it it, I somehow found in my old ruby code a reference to the MarkerClustererPlus library like so:

 script src="//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js" type="text/javascript"

I manually added that to the top of my index file, but that didn't change anything either.

i pretty much ran out of hair to pull out.. what should i do?