Unable to make infowindow work in CartoDB runtime layer

Question

I'm trying to personalize a layer created with CartoDB. The layer is created at runtime and the problem is that I cannot make work even easy things like custom infowindow or legends or click interactions. No errors shown in the js console.

I tried with other layers (the ones used with the CartoDB tutorial) and those are working. What it's wrong with mine?

Here's the code I'm using:

function main() {
      var map;
      var urbino = new google.maps.LatLng(43.7292108173, 12.6530746836);
      var mapOptions = {
        zoom: 15,
        center: urbino,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      map = new google.maps.Map(document.getElementById('map'),  mapOptions);
  cartodb.createLayer(map, {
    user_name: 'my_user',
    type: 'cartodb',
    infowindow: true,
    legends: true,
    sublayers: [{
      sql: "SELECT * FROM raw_output",
      cartocss: '#raw_output { marker-opacity: 0.9;}'
      }]
})
.addTo(map)
.on('done', function(layer) {
   var sublayer = layer.getSubLayer(0);

   sublayer.infowindow.set('template', $('#infowindow_template').html());

   sublayer.on('featureClick', function(e, pos, latlng, data) {
      alert("Hey! You clicked " + data.cartodb_id);
    });
  }).on('error', function() {
    console.log("some error occurred");
  }); 

}

Seems that using runtime layers is not that flexible as using predefined visualizations with the UI...Am I wrong?

Answer 1

It is possible to create an infowindow on a runtime visualisation.

See https://gist.github.com/javisantana/49d31ea2787a53e7ae2d

The key thing is to add the info window inside .done on cartodb.createLayer. Like this:

cartodb.createLayer(map,layerSource)
    .addTo(map)
    .done(function(layer) {
        sublayer = layer.getSubLayer(0);            
        cdb.vis.Vis.addInfowindow(map, sublayer, ['column_name']);
     })
     .error(function(err) {
         console.log("error: " + err);
     });

Answer 2

I feel it is not documented but you can do it. Here it is an example:

http://bl.ocks.org/xavijam/9269220

Answer 3

I also had the same problem and figured out these two options, either place:

cdb.vis.Vis.addInfowindow(map, layer.getSubLayer(0), ['name']);

in place of:

sublayer.infowindow.set('template', $('#infowindow_template').html());

Or Use:

cartodb.createLayer(map, {'http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json'});

instead of

cartodb.createLayer(map, {
user_name: 'my_user',
type: 'cartodb',
infowindow: true,
legends: true,
sublayers: [{
  sql: "SELECT * FROM raw_output",
  cartocss: '#raw_output { marker-opacity: 0.9;}'
  }]}); 

Answer 4

just found it's not possible to do it.

https://groups.google.com/forum/#!searchin/cartodb/infowindow$20/cartodb/kXgzrINV3sA/wVn_x3Dhf6QJ