JSFiddle - React, Tailwind, and code Playground

by nicolas tenorio

HTML

<!--Load the AJAX API-->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<!-- Initialize -->
<script type="text/javascript">
    // globals
    var map = null;
    var infoWindow = null;
    var geoXml = null;
    var geoXmlDoc = null;
    var myLatLng = null;
    var myOptions = null;
    var mapCenter = null;
    var geocodeTheCountry = true;
    var gpolygons = [];
    var geocoder = null;

    // Fusion Table data ID
    var FT_TableID = '1LkZUDcoWDwGcL06wPbkk3SPW1vI0bLtO63JmuTS0'; // numeric ID 420419;

    var CountryNombre = "Cali - Valle del Cauca, Colombia"; // "United States of America";

    google.load('visualization', '1', {
        'packages': ['corechart', 'table', 'geomap']
    });

    function createSidebar() {

        document.getElementById('sidebar').innerHTML = "querying for data";
        var FT_Query2 = "SELECT 'zona', 'nombre', 'cordenadas' FROM " + FT_TableID + " WHERE 'zona' = '" + CountryNombre + "' ORDER by 'nombre'";
        document.getElementById("FTquery2").innerHTML = FT_Query2;
        var queryText = encodeURIComponent(FT_Query2);
        var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText);

        //set the callback function
        query.send(getData);
    }

    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(createSidebar);

    function getCountryNombres() {


        // set the query using the parameters
        var FT_Query_CountryNombre = "SELECT 'zona', count() FROM " + FT_TableID + " GROUP by 'zona' ORDER by 'zona'";
        document.getElementById("FTquery4").innerHTML = FT_Query_CountryNombre;
        var queryText = encodeURIComponent(FT_Query_CountryNombre);
        var query = new google.visualization.Query(



            'http://www.google.com/fusiontables/gvizdata?tq=' +...

CSS

html, body, #map_canvas {

    width: 750px;

    height: 600px;

    margin: 0;

    padding: 0;

}

.infowindow * {

    font-size: 90%;

    margin: 0

}

JavaScript

< body onload = "initialize()" >

< table style = "width:100%;" > < tr > < td colspan = "2" > < h3 > Google Maps JavaScript API v3 Example: Fusion Tables Natural Earth Data Country Browser < /h3></td > < /tr>
<tr><td colspan="2"><div id="dropdown_menu">
</div > < /td></tr > < tr > < td > < div id = "map_canvas" > < /div></td > < td > < div id = "sidebar"
style = "width:300px;height:600px; overflow:auto" > < /div></td > < /tr>
<tr><td colspan="2"><div id="FTquery"></div > < /td></tr > < tr > < td colspan = "2" > < div id = "FTquery2" > < /div></td > < /tr>
<tr><td colspan="2"><div id="FTquery3"></div > < /td></tr > < tr > < td colspan = "2" > < div id = "FTquery4" > < /div></td > < /tr>
<tr><td colspan="2"><div id="FTquery5"></div > < /td></tr > < /table>
<div id="country_list"></div >