javascript - Google マップの InfoBubble がマーカーに読み込まれない

Question

Google Maps と Infobubble Backbone と CofeeScript を使用しています。

I am adding markers to a map like this:
  plotMarkers: (points) ->

    pos = []
    markers = []
    lats = []
    lngs = []

    for point in points

      lats.push(point[0])
      lngs.push(point[1])

      latLng = new google.maps.LatLng(point[0], point[1])

      icon = new google.maps.MarkerImage(
        # MarkerImage(url:string, size?:Size, origin?:Point, anchor?:Point, scaledSize?:Size)
        '/assets/home_marker.png',
      )

      content = new google.maps.Marker(
        icon: icon
        position: latLng
        map: @gMap
      )
      #content["infowindow"] = new google.maps.InfoWindow(content: "hello")
      content["infowindow"] = new InfoBubble(
        maxWidth: 240
        maxHeight: 210
        shadowStyle: 1
        padding: 0
        content: '<div class="tooltip_header">"hey"</div>',
        tabPadding: 15
        backgroundColor: 'black'
        borderRadius: 0
        arrowSize: 10
        borderWidth: 0
        borderColor: '#AB2424'
        disableAutoPan: true
        hideCloseButton: false
        arrowPosition: 0.5
        backgroundClassName: 'phoney'
        tabClassName: 'tabClass'
        activeTabClassName: 'activeTabClass'
        arrowStyle: 2
      )
      google.maps.event.addListener content, 'click', ->
        console.log(this["infowindow"])
        this["infowindow"].open(@gMap, this)


      markers.push(content)
      @delegateEvents()

    return markers

これは Coffee の JS です。

({
  plotMarkers: function(points) {
    var content, icon, latLng, lats, lngs, markers, point, pos, _i, _len;
    pos = [];
    markers = [];
    lats = [];
    lngs = [];
    for (_i = 0, _len = points.length; _i < _len; _i++) {
      point = points[_i];
      lats.push(point[0]);
      lngs.push(point[1]);
      latLng = new google.maps.LatLng(point[0], point[1]);
      icon = new google.maps.MarkerImage('/assets/home_marker.png');
      content = new google.maps.Marker({
        icon: icon,
        position: latLng,
        map: this.gMap
      });
      content["infowindow"] = new InfoBubble({
        maxWidth: 240,
        maxHeight: 210,
        shadowStyle: 1,
        padding: 0,
        content: '<div class="tooltip_header"><h4>Hello</h4></div><div class="tooltip_content"><p>Nunc nec, egestas vel augue rhoncus massa cras, tincidunt a nisi nisi est lundium non sed? Eros pulvinar</p></div> <div id="tooltip_buttons" class="tooltip_buttons"><button class="btn btn-success" id="testdrive">Test Drive</button> <button class="btn btn-warning">Read More</button></div>',
        tabPadding: 15,
        backgroundColor: 'black',
        borderRadius: 0,
        arrowSize: 10,
        borderWidth: 0,
        borderColor: '#AB2424',
        disableAutoPan: true,
        hideCloseButton: false,
        arrowPosition: 0.5,
        backgroundClassName: 'phoney',
        tabClassName: 'tabClass',
        activeTabClassName: 'activeTabClass',
        arrowStyle: 2
      });
      google.maps.event.addListener(content, 'click', function() {
        this["infowindow"].open(this.gMap, this);
        return console.log(this["infowindow"]);
      });
      markers.push(content);
      this.delegateEvents();
    }
    return markers;
  }
});

ご覧のとおり、InfoBubble とリスナー イベントを各マーカーに追加しています。

リスナーは、console.log の行を確認できるように動作しますが、マーカーに情報バブルがまったく表示されません。それは本当に奇妙です。マーカーとは無関係にインフォバブルをロードすると、マップ上で正常にロードされます (位置を指定した場合)

奇妙なことに、infobubble がコンソールに表示されると、次の行が表示されます。

isOpen_: true

インフォバブルをオープンに設定していないのに、オープンになっていると言っているのは奇妙ですか?

ご覧のとおり、ここでの最終的なゲームは、マウスオーバーまたはクリックで情報バブルを表示することです..