Sie können Playground-Apps verwenden, um externe URLs in Ihren Player einzubetten. Diese URLs können webbasierte URLs oder lokale Intranet-URLs sein. Solange Ihr Player über sein verbundenes Netzwerk Zugriff auf die URL hat, ist alles in Ordnung. Sie müssen lediglich eine einfache HTML-Seite mit einem iFrame erstellen. Der iFrame wird im Vollbildmodus angezeigt und verweist intern auf die benötigte Adresse.
Beispiel 1: Google Maps-Integration mit 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>
Im obigen Beispiel sehen Sie eine App, die Google Maps einbettet. Sobald Sie diese App in Ihren Player laden, wird eine Google Maps-Erfahrung im Vollbildmodus angezeigt.
Beispiel 2: Native Implementierung mit Live-Verkehrsdaten
<!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>
Oben sehen Sie ein weiteres Beispiel, bei dem Live-Verkehrsdaten auf einer Karte in Ihrem Player überlagert werden. In diesem Fall wird anstelle eines iFrames eine native Implementierung verwendet. Playground-Apps können ihre Funktionalität selbst hosten. Idealerweise sollte die App nur die notwendigen Daten aus externen Quellen abrufen und diese aus Gründen der Verbindungsresilienz lokal zwischenspeichern. Das Hosten der vollständigen Weboberfläche an einem entfernten Standort und die Darstellung über einen iFrame sollte als letztes Mittel betrachtet werden. Weitere Informationen zur Google Traffic Layer-Dokumentation finden Sie hier.