Integración de aplicaciones web en pantalla completa

Puede usar aplicaciones playground para integrar URL externas en su reproductor. Estas URL pueden ser URL alojadas en la web o URL de intranet local. Siempre que su reproductor tenga acceso a la URL a través de su red conectada, está seguro. Lo que debe hacer es crear una página HTML simple con un iFrame en ella. El iFrame será de pantalla completa y apuntará internamente a la dirección que necesita.

Ejemplo 1: Integración de Google Maps con iFrame

<!DOCTYPE html>
<html>  
   <head>    
   <meta charset="utf-8" />  
   <title></title>
  </head>
  <body style="margin:0px;padding:0px;overflow:hidden"> 
    <iframe src="https://www.google.com/maps" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%">
    </iframe>
  </body>
</html>

En el ejemplo anterior, puede ver una aplicación que integra Google Maps. Una vez que cargue esta aplicación en su reproductor, verá una experiencia de Google Maps en pantalla completa.

Ejemplo 2: Implementación nativa con datos de tráfico en vivo

<!DOCTYPE html>
 <html>
   <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">   <meta charset="utf-8">  
    <title>Live Google Traffic Data</title> 
    <style>       #map {         height: 100%;       }       html, body {         height: 100%;         margin: 0;         padding: 0;       }  
    </style> 
  </head>  
<body>   
  <div id="map"> </div>    
 <script>     
  function initMap() {         var map = new google.maps.Map(document.getElementById('map'), {           zoom: 13,           center: {lat: 34.04924594193164, lng: -118.24104309082031}         });          var trafficLayer = new google.maps.TrafficLayer();         trafficLayer.setMap(map);       }   
  </script>   
  <script async defer     src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">  
   </script> 
  </body>
 </html>

Arriba hay otro ejemplo donde puede superponer datos de tráfico en vivo en un mapa en su reproductor. En este caso, se utiliza una implementación nativa en lugar de un iFrame. Las aplicaciones Playground pueden alojar su funcionalidad. Idealmente, la aplicación debería obtener solo los datos necesarios de fuentes externas, almacenar en caché localmente por razones de resiliencia de conexión. Alojar la interfaz web completa en una ubicación remota y presentarla a través de un iFrame debe considerarse un último recurso. Vea aquí para más detalles sobre la documentación de Google Traffic Layer.