Display text over region in Google Geocharts

Question

How can I display text over the regions ? Currently it displays the selected region only and on mouse over it displays the text. I need to display both text as well as region. Check this fiddle http://jsfiddle.net/manuiec/k2kvjddf/3/

        google.setOnLoadCallback(drawRegionsMap);

  function drawRegionsMap() {

    var data = google.visualization.arrayToDataTable([
      ['Country', 'Popularity'],
      ['Germany', 200],
      ['United States', 300],
      ['Brazil', 400],
      ['Canada', 500],
      ['France', 600],
      ['RU', 700]
    ]);

    var options = {};

    var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

    chart.draw(data, options);
  }

Answer 1

It is entirely possible, although it is somewhat of a pain, to do this with 2 calls to the API. There may be a way to further simplify this but this definitely works in Chrome (haven't tested with other browsers):

1. Use 2 divs to hold the maps. Use identical absolute positions and sizes for both. The first will be hidden, and the second will have a higher z-index (e.g. 10) so that it is layered on top of the first (I'm not sure 2 divs are absolutely necessary but haven't taken the time to try with only 1).

2. create a map with displayMode of 'text' (let's call it "textmap"). Load the map to the first div. Note: this map will require a different data table input than your "real" (colored) map.

3. add a listener to your textmap on 'ready'. In the listener callback, loop through document.getElementsByTagName('text') and, for each element in the list, save its innerHTML (or textContent) and position info (from getBoundingClientRect()) in an array (call this the "label data array"). After you are done you can destroy your textmap if you want (I'd imagine you can destroy the hidden div as well)-- just make sure to save the label data array.

4. the last steps in the textmap listener are to display the colored map and add the data labels (I'm not sure why, but adding the labels first doesn't seem to work. maybe when the map is created it automatically takes a higher z index than anything else on the page). So, draw your "real" map (the colored one) with map.draw(), then add a listener to this map and in its callback, loop through your saved data labels and add each label back in as a new div (with absolute position based on the saved position data) a higher z-index than anything else on the page (e.g. 20).