Jquery 使用电子表格数据的谷歌时间地图：信息窗口不关闭

我读过很多其他的帖子，人们在使用GoogleAPIv3时，也会遇到同样的问题，即infowindows没有关闭。虽然我的问题与此类似，但我的代码并不是因为我使用谷歌电子表格加载数据，从而自动生成标记。（我还没有找到类似的线索）

由于我不是jquery的天才，我没有通过阅读其他线程来成功地调整代码（尽管我确实做了很多尝试）。有人能给我一个合适的代码，当点击另一个标记（在时间线或地图上）时关闭打开的信息窗口吗

我非常感激

我的代码：

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,
    ]
});

var-tm；
$（函数（）{
//地图样式
var styledMapType=new google.maps.styledMapType([{
特色类型：“水”，
元素类型：“全部”，
样式：[{
饱和度：0
}, {
亮度：100
}]
}, {
featureType:“全部”，
元素类型：“全部”，
样式：[{
饱和度：-100
}]
}], {
姓名：“白色”
});
tm=TimeMap.init({
mapId:“map”//map div元素的Id（必需）
timelineId:“timeline”//timeline div元素的Id（必需）
宽度：100，
选项：{
eventIconPath:“隐藏”，
主题：“红色”
},
波段信息：[{
宽度：“75%”，
intervalUnit:Timeline.DateTime.DAY，
间隔：215
}, {
宽度：“25%”，
intervalUnit:Timeline.DateTime.MONTH，
间隔像素：125，
showEventText:false，
轨道高度：0.2，
轨道间距：0.2
}],
数据集：[{
标题：“活动”，
id:“事件”，
主题：“红色”，
类型：“gss”，
选项：{
//请注意，您的电子表格必须发布才能工作
url:“隐藏”，
//将电子表格列名映射到预期ID
参数图：{
开始：“日期”
},
列外：[“标题”、“日期”，
“日期信息窗口”、“照片”，
“照片bijschrift”，“信用卡”，
“Url信用”、“Url”，
“Url tekst”
],
信息模板：“+
" " +
“{{Photo bijschrift}}
”+
“{Date infowindow}{{Title}}”+
“{{description}
请参考此

这把小提琴解决了关闭信息窗口的所有问题，这是必需的

JS代码：

HTML代码：

如果您有任何其他问题或疑问，请添加您的评论，我可以帮助您解决

问候D。
嗨，Daan，你能为你的代码提供一个，使用你正在使用的电子表格吗，或者你能创建一个虚拟电子表格并开发小提琴。问候D。当然，给你：非常感谢你的努力D；你的小提琴做了我想要的，尽管我注意到了它的样式（灰度）地图的样式消失了？有什么想法吗？提前谢谢。你读过我之前关于地图样式的评论吗？我似乎无法再让它工作了？谢谢幸运的是，
stylers:[{saturation:-100}]
代码不起作用，这与地图的主颜色有关。我将获得一些相同的解决方案代码。您好；我想感谢您的帮助，但由于交叉浏览器兼容性和其他缺陷，我决定采取另一种方法，并与之合作，从而为用户提供更好的体验和与浏览器兼容的结果书信电报。
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");
});

#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;
}

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

 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