1442
You can use playground apps to embed external URLs into your player. These URLs can be web hosted URLs or local intranet URLs. As long as your player has access to the URL through its connected network, you are safe. What you need to do is to build a simple HTML Page with an iFrame in it. The iFrame will be full screen and internally point to the address you need.
<!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>
In the example above you can see an app embedding google maps. Once you load this app into your player, you will see a full-screen google maps experience.
<!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>
Above is another example where you can overlay live traffic data onto a map on your player. In this case, a native implementation is used instead of an iFrame. Playground apps can host their functionality. Ideally, the app should fetch only necessary data from external sources, cache locally for connection resiliency reasons. Hosting the full web interface in a remote location and presenting through an iFrame should be considered a last resort. See here for more details about Google Traffic Layer documentation.
