JSFiddle - React, Tailwind, and code Playground

by devangkantharia

HTML

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAASI0kCI-azC8RgbOZzWc3VRRarOQe_TKf_51Omf6UUSOFm7EABRRhO0PO4nBAO9FCmVDuowVwROLo3w"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://www.nieuwsblad.be/extra/static/201407_1418/lib/jquery-1.6.2.min.js"></script>
<script src="http://timemap.googlecode.com/svn/tags/2.0/lib/mxn/mxn.js?(googlev3)"></script>
<script src="http://www.nieuwsblad.be/extra/static/201407_1418/lib/timeline-1.2.js"></script>
<script src="http://www.nieuwsblad.be/extra/static/201407_1418/src/timemap.js"></script>
<script src="http://www.nieuwsblad.be/extra/static/201407_1418/src/param.js"></script>
<script src="http://www.nieuwsblad.be/extra/static/201407_1418/src/loaders/json.js"></script>
<script src="http://www.nieuwsblad.be/extra/static/201407_1418/src/loaders/google_spreadsheet.js"></script>
<div id="timemap">
    <div id="timelinecontainer">
        <div id="timeline"></div>
    </div>
    <div id="mapcontainer">
        <div id="map"></div>
    </div>
</div>

CSS

#timemap {
    height: 1000px;
}
div#timelinecontainer {
    width: 960px;
    height: 250px;
}
div#timeline {
    width: 960px;
    height: 100%;
    font-size: 11px;
    background: #CCCCCC;
}
div#mapcontainer {
    width: 960px;
    height: 750px;
}
div#map {
    width: 100%;
    height: 100%;
    background: #EEEEEE;
}
div.infodescription {
    font-style: normal;
    width: 300px;
}
#oorlog-info {
    position: relative;
    height: auto
}
#oorlog-info .foto {
    width: 340px;
    position: relative;
    float: left;
}
#oorlog-info .foto > img {
    width: 340px;
}
#oorlog-info .foto .bijschrift {
    background: rgba(0, 0, 0, 0.85);
    position: absolute;
    margin:0 auto;
    bottom: 3px;
    width: 340px;
    margin: 0 0px 0px;
}
#oorlog-info .foto .bijschrift > p {
    color: #fff;
    font-size: 9px;
    line-height: 12px;
    padding: 5px 7px 4px;
    text-transform: uppercase;
}
#oorlog-info .foto .bijschrift > p > a {
    color: #c4c4c4;
    font-size: 9px;
    font-style: italic;
}
#oorlog-info .foto .bijschrift > p > a:hover {
    text-decoration: underline;
}
#oorlog-info .data > span {
    background: #111;
    padding: 5px 8px;
    color: #fff;
    display: inline-block;
    font-size: 11px;
    font-weight: bold;
    margin: 0 0 0 10px;
    float: left;
}
#oorlog-info .data > h3 {
    padding: 0;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    margin: 6px 0 0 8px;
}
#oorlog-info .data > p {
    padding: 10px;
    font-size: 11px;
    margin: 0;
    width: 295px;
    line-height: 14px;
}
#oorlog-info .data > p > a {
    padding: 10px 0 0;
    display: block;
    text-transform: uppercase;
}
#oorlog-info .data > p > a {
    background-color:#444;
    font-family:'Open Sans', sans-serif;
    font-size:9px;
    text-decoration:none;
    color:#fff;
    margin: 12px 0 0;
    position:relative;
    padding:6px 0px 4px 8px;
    linear, left bottom, left top, color-stop(0, rgb(44, 160, 202)), color-stop(1, rgb(62, 184,...

JavaScript

var tm;
$(function () {
    //MAP STYLES
    var styledMapType = new google.maps.StyledMapType([{
        featureType: "water",
        elementType: "all",
        stylers: [{
            saturation: 0
        }, {
            lightness: 100
        }]
    }, {
        featureType: "all",
        elementType: "all",
        stylers: [{
            saturation: -100
        }]
    }], {
        name: "white"
    });

    tm = TimeMap.init({
        mapId: "map", // Id of map div element (required)
        timelineId: "timeline", // Id of timeline div element (required) 
        width: 100,
        options: {
            eventIconPath: "",
            theme: "red"
        },
        bandInfo: [{
            width: "75%",
            intervalUnit: Timeline.DateTime.DAY,
            intervalPixels: 215
        }, {
            width: "25%",
            intervalUnit: Timeline.DateTime.MONTH,
            intervalPixels: 125,
            showEventText: false,
            trackHeight: 0.2,
            trackGap: 0.2
        }],

        datasets: [{
            title: "Events",
            id: "events",
            theme: "purple",
            type: "gss",
            options: {
                // note that your spreadsheet must be published for this to work
                //                key: "pjUcDAp-oNIOjmx3LCxT4XA",
                url: "https://spreadsheets.google.com/feeds/list/1elu4weQh25aK01wB5pliKMeST5hiuyxHvKtcSFjBmRc/1/public/values?alt=json-in-script",
                // map spreadsheet column names to expected ids
                paramMap: {
                    start: "date"
                },
                extraColumns: ["Title", "Date",
                    "Date infowindow", "Photo",
                    "Photo bijschrift", "Credit",
                    "Url credit", "Url",
                    "Url tekst"],
                infoTemplate: "<div style='overflow:hidden;line-height:1.35;min-width:200px;'><div id='oorlog-info'><table><tr><td valign='top'><div...