How do you add infowindow to a cluster?

[jellybean34]

There are examples included in the download docs. One shows how to add clusters and the other shows how to add infowindows, but there is no example of individual markers with infowindows whilst using the cluster.

Surely this is possible.

If this is my code for clusters, how do I add infowindow?

$('#map').gmap3({
    center: center,
    zoom: zoom
})

.cluster({
size: 100,
markers: results, 

cb: function (markers) {
    if (markers.length > 1) { 
        if (markers.length < 20) {
            return {
            content: "<div class='cluster cluster-1'>" + markers.length + "</div>",
            x: -26,
            y: -26,
            };
        }
        if (markers.length < 50) {
            return {
            content: "<div class='cluster cluster-2'>" + markers.length + "</div>",
            x: -26,
            y: -26,
            };
        }
            return {
            content: "<div class='cluster cluster-3'>" + markers.length + "</div>",
            x: -33,
            y: -33,
            };
        }
    }
})

[jbdemonte]

Here is an example:

Notice I stored a custom property info as text in the marker options (this is not a dedicated property, you can use what you want)

    var infowindow;
    $('#test')
      .gmap3({
        center: [46.578498,2.457275],
        zoom: 6
      })
      .infowindow({
        content: ''
      })
      .then(function (iw) {
        infowindow = iw;
      })
      .cluster({
          size: 200,
          markers: [
            {position: [48.8620722, 2.352047], info: 'A'},
            {position: [44.28952958093682, 6.152559438984804], info: 'B', icon: "http://maps.google.com/mapfiles/marker_green.png"},
            {position: [49.28952958093682, -1.1501188139848408], info: 'C'},
            {position: [44.28952958093682, -1.1501188139848408], info: 'D'}
          ],
          cb: function (markers) {
            if (markers.length > 1) { // 1 marker stay unchanged (because cb returns nothing)
              if (markers.length < 20) {
                return {
                  content: "<div class='cluster cluster-1'>" + markers.length + "</div>",
                  x: -26,
                  y: -26
                };
              }
              if (markers.length < 50) {
                return {
                  content: "<div class='cluster cluster-2'>" + markers.length + "</div>",
                  x: -26,
                  y: -26
                };
              }
              return {
                content: "<div class='cluster cluster-3'>" + markers.length + "</div>",
                x: -33,
                y: -33
              };
            }
          }
      })
      .on('click', function (marker, clusterOverlay, cluster, event) {
        if (marker) {
          infowindow.setContent(marker.info);
          infowindow.open(marker.getMap(), marker);
        }
      })
    ;