Google Visualization Map Tooltip

157 views
Skip to first unread message

Laverne Davis

unread,
Oct 19, 2016, 8:55:12 AM10/19/16
to Google Visualization API
I have a google map that pulls the underlying data from a Google Spreadsheet. I would like to customize the Tooltip to add an image as well as css style while pulling underlying data from the spreadsheet. I can't seem to find any information on how to customize a tooltip that pulls underlying data from a spreadsheet, but i see plenty of options of customizing using the Google Map API without pulling underlying data. Here is an example of my code but just using data embedded into the code, but same concept.

<!DOCTYPE html>
<html>
<style>
.visualization{
width: 1200;
height: 1200;

}


</style>
<body>
<script src="//www.google.com/jsapi"></script>
<div id="visualization"></div>


<script>
google.load('visualization', '1.1', {packages: ['geochart'], callback: drawVisualization});
google.load('visualization', '1', {
      packages: ['corechart', 'map']
    });



function drawVisualization() {
    var data = google.visualization.arrayToDataTable([
        ['Country', 'Value', {role: 'tooltip', p:{html:true}}],
        ['Russia', 5, 'Hello world'],
        ['US', 20, '<img src="https://www.google.com/images/srpr/logo6w.png"/>']]);
        
        
         var options = {
tooltip: {isHtml: true},
          width: 1200, 
          height: 1200        };
        
    var chart = new google.visualization.IntensityMap(document.getElementById('visualization'));
     chart.draw(data, options);
    
}
</script>



</body>
</html>

Daniel LaLiberte

unread,
Oct 19, 2016, 9:50:54 AM10/19/16
to Google Visualization API
Hi Laverne,

The easiest way to add custom tooltips to retrieved data is probably to construct a DataView from the retrieved DataTable.  Use setColumns with a calculated column for the tooltip column.  See the documentation on DataViews here: https://developers.google.com/chart/interactive/docs/reference#dataview-class

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/c66552d7-6f44-48bc-8f39-158b6a0b6bf3%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--

Laverne Davis

unread,
Oct 19, 2016, 10:04:46 AM10/19/16
to Google Visualization API
Thank You...i will take a look.
To post to this group, send email to google-visua...@googlegroups.com.



--
Reply all
Reply to author
Forward
0 new messages