我有一张带有标记和附加信息的地图。我想在一些infowindows中播放youtube视频(基于markerData数组中的值),如下例所示:http://www.henrysenior.co.uk/ICC/boris_again/
我查看了这个解决方案:YouTube video in a Google Map Info Window但是在我的代码中,它似乎无法在任何浏览器中运行。此外,“测试”一词出现在标题为“视频”的标签中,这是错误的......我在这里做错了什么?
var infoBubble;
var arrMarkers = [];
var markerData = [
['burger1', 52.308584, 4.767637, 1, 'yellow', 'info'],
['burger2', 52.308656, 4.76517, 1, 'yellow', 'info'],
['burger3', 52.308656, 4.72517, 1, 'yellow', 'info'],
['observant1', 52.309686, 4.762734, 2, 'red', 'info'],
['observant2', 52.309463, 4.771693, 2, 'red', 'info'],
['observant3', 52.309963, 4.771693, 2, 'red', 'info'],
['camera1', 52.308656, 4.76517, 3, 'camera2', 'video'],
['camera2', 52.30845238478713,4.76582407951355, 3, 'camera2', 'video'],
['camera3', 52.30868197442641,4.768838882446289, 3, 'camera2', 'video'],
['camera4', 52.307501215025695,4.769954681396484, 3, 'camera2', 'video'],
['camera5', 52.30950848726883,4.773516654968262, 3, 'camera2', 'video'],
['camera6', 52.309744630960914,4.762208461761475, 3, 'camera2', 'video'],
];
//start this script at load
function initialize()
{
//http://www.geocodezip.com/v3_SO_infoBubbleTabbedContent.html
var mapProp = { //set map properties
center:new google.maps.LatLng(52.309213,4.762316),
zoom:16,
mapTypeId:google.maps.MapTypeId.HYBRID
};
//create map variable with properties
var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
for (i = 0; i < markerData.length; i++) {
var pos = new google.maps.LatLng(markerData[i][1], markerData[i][2]);
var title = markerData[i][0];
var category = markerData[i][3];
var new_marker = addMarker(pos, title, category);
arrMarkers.push(new_marker);
new_marker.setVisible(false);
}
function addMarker (pos, title, category) {
var marker = new google.maps.Marker({
map: map,
position: pos,
icon: "mapIcons/marker_"+markerData[i][4]+".png",
category: category,
});
infoBubble = new InfoBubble({
maxWidth: 300,
borderRadius: 10,
borderWidth: 1,
borderColor: '#2c2c2c',
shadowStyle: 1
});
var infoWindow = new google.maps.InfoWindow;
var info = "<b>" + 'test' + "</b>" ; //html inside InfoWindow
//var video = "<div>" + '<iframe width="100" height="75" src=https://www.youtube.com/watch?v=4gMH0V4L4A4>' + "</iframe>" + "</div>"; //html inside InfoWindow
var video = '<iframe title="YouTube video player" class="youtube-player" type="text/html" width="480" height="390" src="http://www.youtube.com/embed/UmFjNiiVk9w?rel=0" frameborder="0"></iframe>';
bindInfoWindow(marker, map, infoBubble, info, video);
if (markerData[i][5] == 'info') {
infoBubble.addTab('Info', info);
};
if (markerData[i][5] == 'video') {
infoBubble.addTab('Video', video);
};
return marker;
}
//define click action for id 'open'
google.maps.event.addDomListener(document.getElementById('open'),'click', function() {
infoBubble.open();
});
//define click action for id 'closed'
google.maps.event.addDomListener(document.getElementById('close'),'click', function() {
infoBubble.close();
});
}//end of initialize
function bindInfoWindow(marker, map, infoBubble, html) {
google.maps.event.addListener(marker, 'click', function() {
infoBubble.setContent(html);
infoBubble.open(map, marker);
});
}
function addTab() {
var title = document.getElementById('tab-title').value;
var content = document.getElementById('tab-content').value;
if (title != '' && content != '') {
infoBubble.addTab(title, content);
}
}
// == shows all markers of a particular category, and ensures the checkbox is checked ==
function show(category) {
for (var i=0; i<arrMarkers.length; i++) {
if (arrMarkers[i].category == category) {
arrMarkers[i].setVisible(true);
}
}
// == check the checkbox ==
document.getElementById("cat"+category).checked = true;
}
// == hides all markers of a particular category, and ensures the checkbox is cleared ==
function hide(category) {
for (var i=0; i<arrMarkers.length; i++) {
if (arrMarkers[i].category == category) {
arrMarkers[i].setVisible(false);
}
}
// == clear the checkbox ==
document.getElementById("cat"+category).checked = false;
// == close the info window, in case its open on a marker that we just hid
infoBubble.close(map, marker);
}
// == a checkbox has been clicked ==
function boxclick(box,category) {
if (box.checked) {
show(category);
}
else {
hide(category);
}
}