Fusion table layer mouseover tooltips in fixed position and images

Question

Hello I'm working on the fusion table layer mouseover tool-tip in fixed position. Idea is to display Country flag or any image, stored in fusion table and some other information also stored in fusion table. And my problem is with flag, link to the flag is displaying but I can't display any images properly.

http://jsbin.com/uHUQERin/1/

Any ideas ?

Answer 1

To display an image replace this part of the code:

            var row = fEvent.row;
            myHtml = 'mouseover:<br/>';
            for (var x in row) {
              if (row.hasOwnProperty(x)) {
                myHtml += '<b>' + x + "</b>:" + row[x].value + "<br/>";
              }
            }
            document.getElementById('info').innerHTML = myHtml;

With that:

            var row = fEvent.row;
            myHtml = '<img src="'+row.flag.value+'"/>';
            document.getElementById('info').innerHTML = myHtml;

But the basic issue is that what you see on the map is the FusionTip, not the #info-div(it's placed below the map).

Disable the display of the FusionTips and place the #info-div at the desired position.

Fixed version: http://jsbin.com/EpiTODa/1

Of course it would be possible to use the FusionTip to display the flag, but this would require to modify the library, so I wouldn't suggest it.