YouTube视频在Google地图信息窗口中 [英] YouTube video in a Google Map Info Window
问题描述
我试图将YouTube视频放入Google Map（v3）信息窗口。
I am trying to put a youtube video into a Google Map (v3) Info Window.
在Firefox和Internet Explorer中正常运行。
It works fine in Firefox and Internet Explorer.
它不会在Safari和Chrome中使用 。在这些浏览器中，定位功能关闭，移动地图时视频不会移动。有时候，视频也会被切碎。
It does not work in Safari and Chrome. In those browsers the positioning is off and the video doesn't move when you move the map. The video also gets chopped sometimes.
以下是代码
<!doctype html>
<html>
<head>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
var map;
function initialize() {
latlng = new google.maps.LatLng(33.4222685, -111.8226402)
myOptions = {
zoom: 4,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"),myOptions)
var point = new google.maps.LatLng(33.4222685, -111.8226402);
var marker = new google.maps.Marker({
position: point,
map: map
})
google.maps.event.addListener(marker, "click", function(){
bubble = new google.maps.InfoWindow({
content: '<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/UmFjNiiVk9w?fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/UmFjNiiVk9w?fs=1" type="application/x-shockwave-flash" width="425" height="344" allowscriptaccess="always" allowfullscreen="true"></embed></object>'
})
bubble.open(map, marker);
})
}
</script>
</head>
<body onload="initialize();">
<div id="map" style="width: 984px; height: 495px"></div>
</div>
</body>
</html>
Google地图API版本2正常工作的一个例子是 http://www.virtualvideomap.com/
An example of it working fine for the Google Maps API version 2 is here http://www.virtualvideomap.com/
同样在 http://maps.google.com 通过点击更多，您可以在信息窗口中看到在Chrome和Safari中工作的YouTube视频。 ..，然后检查视频。
Also on http://maps.google.com You can see youtube videos inside the Info Window working in Chrome and Safari by clicking "More..." on the top right of the map, and then checking "Videos".
推荐答案
得到了一个部分解决方案，使用iframe嵌入模式将问题排序给我！
Got a partial solution, use the iframe embed mode sorted the problem out to me!
希望它有帮助!!
<!doctype html>
<html>
<head>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
var map;
function initialize() {
latlng = new google.maps.LatLng(33.4222685, -111.8226402)
myOptions = {
zoom: 4,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"),myOptions)
var point = new google.maps.LatLng(33.4222685, -111.8226402);
var marker = new google.maps.Marker({
position: point,
map: map
})
google.maps.event.addListener(marker, "click", function(){
bubble = new google.maps.InfoWindow({
content: '<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>'
})
bubble.open(map, marker);
})
}
</script>
</head>
<body onload="initialize();">
<div id="map" style="width: 984px; height: 495px"></div>
</div>
</body>
</html>
这篇关于YouTube视频在Google地图信息窗口中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
