I have a web aplication that is running fine. The only exception i got is google map api v3 on smart tv’s. The map load perfectly on IOS, Android, PC, MAC but not on Smart TV. I am testing here on a LG Smart TV with WebOS and it just give me a withe screen. Doesn anyone know what can be wrong? I have made a test page only in HTML and with no custom data to see if it change anything but still the same thing!
Here is my current HTML i use for testing, i have changed the API key for obvious reason!
<!DOCTYPE html>
<html>
<head>
<style>
html, body, #map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map {
position: relative;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" value="en-US" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Test">
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
</head>
<body>
<div id="map" style="height: 100%; width: 100%;"></div>
</body>
<script>
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8,
});
console.log(google.maps.version);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=jkhkhkjjhkfsdjlfjlksdjfkljh&callback=initMap"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</html>
Does anyone know what can be causing that?
Thanx a lot!