Wie füge ich Clustermarker zu Gmaps4rails hinzu?

Question

Ich konnte den Marker-Cluster in diesem Format innerhalb der index.html.erb-Datei hinzufügen. Als ich beschloss, Infofenster hinzuzufügen, begann meine Karte zu brechen.

<script type = "text/javascript"> 
    handler = Gmaps.build('Google', 
    {markers: 
     {clusterer: { 
     gridSize: 60, 
     maxZoom: 20, 
     styles: [ { 
      textSize: 10, 
      textColor: '#ff0000', 
      url: 'assets/creative/m1.png', 
      height: 60, 
      width: 60 } 
     , { 
      textSize: 14, 
      textColor: '#ffff00', 
      url:'assets/creative/m2.png', 
      height: 60, 
      width: 60 } 
     , { 
     textSize: 18, 
     textColor: '#0000ff', 
     url: 'assets/creative/m3.png', 
     width: 60, 
     height: 60} 
     ]}}} 
    ); 
     handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){ 
      markers = handler.addMarkers(<%=raw @hash.to_json %>); 
      handler.bounds.extendWith(markers); 
      handler.fitMapToBounds(); 

     }); 

Als ich meine Infofenster zu Web-App unter meiner custom.js.coffee Datei als

class InfoBoxBuilder extends Gmaps.Google.Builders.Marker 

create_infowindow: -> 
return null unless _.isString @args.infowindow 

boxText = document.createElement("div") 
boxText.setAttribute('class', 'panel panel-green') 
boxText.innerHTML = @args.infowindow 
@infowindow = new InfoBox(@infobox(boxText)) 


infobox: (boxText)-> 
content: boxText 
pixelOffset: new google.maps.Size(-140, 0) 
boxStyle: 
    width: "280px" 

@buildMap = (markers)-> 
handler = Gmaps.build 'Google', { builders: { Marker: InfoBoxBuilder} 
} 
handler = Gmaps.build 'Google', { builders: { markers: 
     {clusterer: { 
     gridSize: 60, 
     maxZoom: 20, 
     styles: [ { 
      textSize: 10, 
      textColor: '#ff0000', 
      url: 'assets/creative/m1.png', 
      height: 60, 
      width: 60 } 
     , { 
      textSize: 14, 
      textColor: '#ffff00', 
      url:'assets/creative/m2.png', 
      height: 60, 
      width: 60 } 
     , { 
     textSize: 18, 
     textColor: '#0000ff', 
     url: 'assets/creative/m3.png', 
     width: 60, 
     height: 60} 
     ]}}} } #dependency injection 

    handler.buildMap { provider: {}, internal: {id: 'map'} }, -> 
    markers = handler.addMarkers(markers) 
    handler.bounds.extendWith(markers) 
    handler.fitMapToBounds() 

hinzufügen erhalte ich den Marker-Cluster arbeiten, aber ich das Infofenster Formatierung verlieren. Wie injiziere ich das infowwindow und den Markierungsclustercode in die custom.coffee.js Akte.

Answer 1

Ich endlich herausgefunden. Ich habe zuerst den Infobox-Builder von Coffeescript in einfaches altes Vanille-JavaScript umgewandelt und dann nach der ersten Abhängigkeitsinjektion die Marker-Cluster-Abhängigkeit hinzugefügt. Ich habe den folgenden Code zur Ansicht hinzugefügt.

var InfoBoxBuilder, handler, 
     extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; }, 
     hasProp = {}.hasOwnProperty; 

    InfoBoxBuilder = (function(superClass) { 
     extend(InfoBoxBuilder, superClass); 

     function InfoBoxBuilder() { 
     return InfoBoxBuilder.__super__.constructor.apply(this, arguments); 
     } 

     InfoBoxBuilder.prototype.create_infowindow = function() { 
     var boxText; 
     if (!_.isString(this.args.infowindow)) { 
      return null; 
     } 
     boxText = document.createElement("div"); 
     boxText.setAttribute('class', 'panel panel-green'); 
     boxText.innerHTML = this.args.infowindow; 
     return this.infowindow = new InfoBox(this.infobox(boxText)); 
     }; 

     InfoBoxBuilder.prototype.infobox = function(boxText) { 
     return { 
      content: boxText, 
      pixelOffset: new google.maps.Size(-140, 0), 
      boxStyle: { 
      width: "280px" 
      } 
     }; 
     }; 

     return InfoBoxBuilder; 

    })(Gmaps.Google.Builders.Marker); 

     handler = Gmaps.build('Google', { 
      builders: { 
      Marker: InfoBoxBuilder 
      }, 
      markers: 
        {clusterer: { 
        gridSize: 60, 
        maxZoom: 20, 
        styles: [ { 
         textSize: 10, 
         textColor: '#ff0000', 
         url: 'assets/creative/m1.png', 
         height: 60, 
         width: 60 } 
        , { 
         textSize: 14, 
         textColor: '#ffff00', 
         url:'assets/creative/m2.png', 
         height: 60, 
         width: 60 } 
        , { 
        textSize: 18, 
        textColor: '#0000ff', 
        url: 'assets/creative/m3.png', 
        width: 60, 
        height: 60} 
        ]}} 
     }); 
     handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){ 
         markers = handler.addMarkers(<%=raw @hash.to_json %>); 
         handler.bounds.extendWith(markers); 
         handler.fitMapToBounds(); 

        }); 

Jetzt kann ich beide Marker Cluster und ein eigenes Infofenster für jedes meiner Standorte hat.