Highlight country flag on blank world map when hov

Question

I'm using jVectormap plugin for country highlighting on world map. Now As my question suggests i want to show country's flag when specific country is hovered over.

I don't want to do image mapping for whole world map. so don't post that solution, i don't think its a feasible solution as i don't have such time to do that.

if anybody has done this functionality using any plugin, svg, google maps, js anything please help me out.

If any paid plugin is there even then i would like to know. I have searched for 2 days. But i haven't come across such functionality yet.

Answer 1

You can provide a function for onRegionLabelShow that uses the region code to construct a URL for the country flag and then customize the label.

$(function() {
    $('#map').vectorMap({
        onRegionLabelShow: function(event, label, code)
        {
           label.html(label.html()+
           '<br><img src="'+getFlagImgSrc(code)+'" height="20">');
        }
    });

    /*
    * Constructs a URL for a country flag image on Flags Of The World 
    * using the ISO-3166 Digraph 
    */
    function getFlagImgSrc(code)
    {
       return 'http://www.fotw.us/images/'+
               code.toLowerCase().substring(0,1)+
               '/'+
               code.toLowerCase()+
               '.gif';  
    }    

});​

An example of how the rendered label looks with the country flag when you mouse over a region: