Video de YouTube en una ventana de información de Google Map
Estoy tratando de poner un video de youtube en una ventana de información de Google Map (v3).
Funciona bien en Firefox e Internet Explorer.
Lo haceno trabajar en Safari y Chrome. En esos navegadores, el posicionamiento está desactivado y el video no se mueve cuando mueve el mapa. El video también se corta a veces.
Aquí está el código que doe
<!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>
Un ejemplo de que funciona bien para la versión 2 de la API de Google Maps está aquíhttp://www.virtualvideomap.com/
También enhttp://maps.google.com Puede ver videos de YouTube dentro de la ventana de información trabajando en Chrome y Safari haciendo clic en "Más ..." en la parte superior derecha del mapa y luego marcando "Videos".