Google timemap using spreadsheet data: infowindows do not close

Question

I have read a lot of other threads that people are having the same problem with the infowindows not closing when using the google api v3. Although my problem is similiar, my code isn't because I'm using a google spreadsheet to load the data that makes the markers automatically. (I haven't found a similiar thread)

As I'm not such of a jquery genius, I did not succeed to adjust my code by reading these other threads (i really did tried a lot though). Could someone be so kind to deliver me a proper code which closes the open infowindows when clicked on another marker (in the timeline or on the map)?

My gratitude is immense.

My code:

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: "hidden",
        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: "red",
        type: "gss",
        options: {
            // note that your spreadsheet must be published for this to work
            url: "hidden",
            // 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 class='foto'>" +
            "<img src='{{Photo}}' /> <div class='bijschrift'>" +
            "<p>{{Photo bijschrift}}<br><a href='{{Url credit}}'>{{Credit}}</a></p></div> </div></td><td valign='top'><div class='data'>" +
            "<span>{{Date infowindow}}</span><h3>{{Title}}</h3>" +
            "<p>{{description}}<br /><a href='{{Url}}'>{{Url tekst}}</a></p></div></div><br style='clear: both'"
        }
    }],
    bandIntervals: [
    Timeline.DateTime.DAY,
    Timeline.DateTime.MONTH,
    ]
});

Hi Daan, can you please provide a [JSFiddle Link](http://jsfiddle.net/), for your code, using spreadsheet that you are using, or you can create a dummy spreadsheet and develop the Fiddle. Regards D. — DevangKantharia, Jul 28 '14 at 14:57

score 0 · Accepted Answer · answered Jul 29 '14 at 11:16

Please refer to this JS Fiddle

This fiddle is having all the issues solved of closing the infowindow, that was required.

JS Code:

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 class='foto'>" +
                    "<img src='{{Photo}}' /> <div class='bijschrift'>" +
                    "<p>{{Photo bijschrift}}<br><a href='{{Url credit}}'>{{Credit}}</a></p></div> </div></td><td valign='top'><div class='data'>" +
                    "<span>{{Date infowindow}}</span><h3>{{Title}}</h3>" +
                    "<p>{{description}}<br /><a href='{{Url}}'>{{Url tekst}}</a></p></div></div><br style='clear: both'"
            }
        }],
        bandIntervals: [
        Timeline.DateTime.WEEK,
        Timeline.DateTime.MONTH]
    });
    var gmap = tm.getNativeMap();
    gmap.mapTypes.set("white", styledMapType);
    gmap.setMapTypeId("white");
});

CSS Code:

#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, 229)));
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: inset 0px 1px 0px #333, 0px 3px 0px 0px #000;
    -moz-box-shadow: inset 0px 1px 0px #333, 0px 3px 0px 0px #000;
    -o-box-shadow: inset 0px 1px 0px #333, 0px 3px 0px 0px #000;
    box-shadow: inset 0px 1px 0px #333, 0px 3px 0px 0px #000;
    width: 150px;
}
#oorlog-info .data > p > a:active {
    top:3px;
    background: #333;
    linear, left bottom, left top, color-stop(0, rgb(62, 184, 229)), color-stop(1, rgb(44, 160, 202)));
    -webkit-box-shadow: inset 0px 1px 0px #222, 0px 2px 0px 0px #111, 0px 5px 3px #999;
    -moz-box-shadow: inset 0px 1px 0px #222, 0px 2px 0px 0px #111, 0px 5px 3px #999;
    -o-box-shadow: inset 0px 1px 0px #222, 0px 2px 0px 0px #111, 0px 5px 3px #999;
    box-shadow: inset 0px 1px 0px #222, 0px 2px 0px 0px #111, 0px 5px 3px #999;
}
#oorlog-info .data > p > a::before {
    background-color:#222;
    background-image:url(http://www.nieuwsblad.be/extra/static/201407_1418/images/right_arrow.png);
    background-repeat:no-repeat;
    background-position:center center;
    content:"";
    width:16px;
    height:16px;
    position:absolute;
    right:9px;
    top:50%;
    margin-top:-7px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: inset 0px 1px 0px #000, 0px 1px 0px #666;
    -moz-box-shadow: inset 0px 1px 0px #000, 0px 1px 0px #666;
    -o-box-shadow: inset 0px 1px 0px #000, 0px 1px 0px #666;
    box-shadow: inset 0px 1px 0px #000, 0px 1px 0px #666;
}
#oorlog-info .data > p > a:active::before {
    top:50%;
    margin-top:-12px;
    -webkit-box-shadow: inset 0px 1px 0px #666, 0px 2px 0px #444, 0px 4px 3px #111;
    -moz-box-shadow: inset 0px 1px 0px #666, 0px 2px 0px #444, 0px 4px 3px #111;
    -o-box-shadow: inset 0px 1px 0px #666, 0px 2px 0px #444, 0px 4px 3px #111;
    box-shadow: inset 0px 1px 0px #666, 0px 2px 0px #444, 0px 4px 3px #111;
}

HTML Code:

<div id="timemap">
    <div id="timelinecontainer">
        <div id="timeline"></div>
    </div>
    <div id="mapcontainer">
        <div id="map"></div>
    </div>
</div>

External Files added in the fiddle:

 1. http://timemap.googlecode.com/svn/tags/2.0.1/examples/examples.css
 2. http://maps.google.com/maps?file=api&v=2&key=ABQIAAAASI0kCI-azC8RgbOZzWc3VRRarOQe_TKf_51Omf6UUSOFm7EABRRhO0PO4nBAO9FCmVDuowVwROLo3w
 3. http://timemap.googlecode.com/svn/tags/2.0.1/lib/jquery-1.6.2.min.js
 4. http://timemap.googlecode.com/svn/tags/2.0.1/lib/mxn/mxn.js?(google)
 5. http://timemap.googlecode.com/svn/tags/2.0.1/lib/timeline-1.2.js
 6. http://timemap.googlecode.com/svn/tags/2.0.1/src/timemap.js
 7. http://timemap.googlecode.com/svn/tags/2.0.1/src/param.js
 8. http://timemap.googlecode.com/svn/tags/2.0.1/src/loaders/json.js
 9. http://timemap.googlecode.com/svn/tags/2.0.1/src/loaders/google_spreadsheet.js

If you have any other concern or query, please add your comment, and I can help you out to solve it.

Regards D.

Thanks a lot for the effort D; Your fiddle does what I wanted, although i notice the styling (grayscale) of the map is gone? Any idea? Thanks in advance. — Daan, Jul 29 '14 at 13:10
Did you read my previous comment concerning the styling of the map? i can't seem to get it working anymore? Thanks — Daan, Jul 30 '14 at 11:17
Unfortunately,`stylers: [{saturation: -100}]` code is not working, that deals with the main color, of the map. I will get some workaround code for the same. — DevangKantharia, Jul 30 '14 at 11:43
Hi D; I want to thank you for your effort helping me out but due to crossbrowser compatibility and other bugs I decided to take another route and work with http://timemapper.okfnlabs.org/ which gives the user a lot better experience and a browser compatible result. — Daan, Aug 01 '14 at 10:13

Google timemap using spreadsheet data: infowindows do not close

1 Answers1