JSFiddle - React, Tailwind, and code Playground

by Nicola Stathers

HTML

<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="map_container">
<h2>Click on a marker to see the school name and address.</h2>
<div id='map_canvas'></div>
<div id="school_info"></div>

CSS

body {font-family: georgia, 'times new roman', times, serif;}
    h1 {font-size: 22px; font-weight: normal; height: 26px; line-height: 26px; margin: 0px; padding: 0px;}
    h2 {color: #333; font-size: 14px; font-weight: normal; line-height: 19px; margin: 0px 0px 5px 0px; padding: 0px 10px 0px 0px;}
    #map_container {width: 559;}

JavaScript

google.load("jquery", "1.7.1");

google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(draw2011Members);

function draw2011Members() {
    var query = new google.visualization.Query('https://docs.google.com/spreadsheet/tq?key=0AjLBjYTM0rPRdDJiRjhLRTFsOTVqOVByWGFjRl9BX2c&headers=-1')
    query.send(handleQueryResponse);
};

function handleQueryResponse(response) {
  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }

  var data = response.getDataTable();
  var california = new google.visualization.DataView(data);
  california.setRows(california.getFilteredRows([{column: 7, value: "California"}]));
  california.setColumns([0, 1, 2]);
  california.setColumns([0, 1, 2, {
        type: 'string',
        role: 'tooltip',
        calc: function (dataTable, rowNum) {
            return "This does nothing (but it does hide column 2's value)";
        }
    }]);
  var geochart = new google.visualization.GeoChart(document.getElementById('map_canvas'));
    geochart.draw(california, {resolution: 'provinces', region: 'US-CA', displayMode: 'markers', legend: 'none', sizeAxis: {minValue: 1, maxValue: 20, minSize: 2, maxSize: 2}, tooltip:  {textStyle: {color: '#FF0000'}, showColorCode: true}}); 

  california.setColumns([0, 1, 2, 3, 4, 5, 6]);
    google.visualization.events.addListener(geochart, 'select', function() {
        var school = california.getValue(geochart.getSelection()[0].row, 4);
        var address = california.getValue(geochart.getSelection()[0].row, 5);
        $("#school_info").html(school + "<br />" + address);
    });
};