2010-09-12 24 views
11

Tôi đang cố gắng đưa video trên youtube vào Cửa sổ thông tin của Google Map (v3).Video trên YouTube trong Cửa sổ thông tin bản đồ của Google

Nó hoạt động tốt trong Firefox và Internet Explorer.

không hoạt động trong Safari và Chrome. Trong các trình duyệt đó, vị trí tắt và video không di chuyển khi bạn di chuyển bản đồ. Video cũng bị cắt đôi khi.

Dưới đây là đoạn code mà nai

<!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> 

Một ví dụ về nó làm việc tốt cho API Google Maps phiên bản 2 là ở đây http://www.virtualvideomap.com/

Cũng trong ngày http://maps.google.com Bạn có thể thấy youtube video bên trong Info Window làm việc trong Chrome và Safari bằng cách nhấp vào "Khác ..." ở trên cùng bên phải của bản đồ và sau đó chọn "Video".

+0

http://code.google.com/p/gmaps-api-issues/issues/detail?id=3160 –

Trả lời

2

Đây là một lỗi webkit, nhưng bạn có thể tìm một giải pháp ở đây: http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/ccaaee32b89e3656/c87bb19e4662bd78#c87bb19e4662bd78

+0

Cảm ơn bạn. Tuy nhiên, việc đưa video trên youtube vào bản đồ bằng cách sử dụng API Google Maps phiên bản 2 hoạt động tốt trong Chrome và Safari. Xem trang web này như là một ví dụ http://www.virtualvideomap.com/ (Bạn có thể xem nguồn quá. Nó khá dễ dàng để làm theo javascript) –

2

Got một giải pháp một phần, sử dụng chế độ nhúng iframe sắp xếp các vấn đề ra cho tôi!

Hy vọng điều đó sẽ hữu ích !!

<!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> 
0

Gần đây tôi đã giải quyết vấn đề này bằng cách thêm các phong cách:
iframe { -webkit-transform:translate3d(0,0,0); }
đến file css của tôi. Trong trường hợp của tôi, tất cả nội dung động đã nằm trong iFrame và tôi vẫn gặp sự cố này. Tôi đã thấy đề xuất biến đổi này ở một nơi nào đó trước đây, nhưng chỉ mới thử nó ngày hôm nay. Tôi đã thử nghiệm nó trong Chrome và Safari trên Windows 7. Vẫn còn một số độ trễ vị trí, nhưng về cơ bản nó hoạt động tốt ngay bây giờ.

+0

'-webkit-transform: translateZ (0)' dường như cũng hoạt động. – Trevor

Các vấn đề liên quan