I am trying to load a web resource on a custom entity form. The page works outside of Dynamics but when put into a web resource it just shows a blank page. The source of the web page is below. Any ideas what is going wrong?
<html><head><script>
var pinInfobox;
function GetMap() {
var pushpinInfos = [];
pushpinInfos[0] = { 'lat': 52.4982, 'lng': -2.581, 'title': 'Address 1', 'description': 'Some Text' };
pushpinInfos[1] = { 'lat': 52.5012, 'lng': -2.570, 'title': 'Address 2', 'description': 'Some Text' };
pushpinInfos[2] = { 'lat': 52.4994, 'lng': -2.578, 'title': 'Address 3', 'description': 'Some Text' };
var infoboxLayer = new Microsoft.Maps.EntityCollection();
var pinLayer = new Microsoft.Maps.EntityCollection();
var apiKey = "<api key>";
var map = new Microsoft.Maps.Map(document.getElementById("map"), { credentials: '<api key>' });
// Create the info box for the pushpin
pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false });
infoboxLayer.push(pinInfobox);
var locs = [];
for (var i = 0 ; i < pushpinInfos.length; i++) {
locs[i] = new Microsoft.Maps.Location(pushpinInfos[i].lat, pushpinInfos[i].lng);
var pin = new Microsoft.Maps.Pushpin(locs[i]);
pin.Title = pushpinInfos[i].title;
pin.Description = pushpinInfos[i].description;
pinLayer.push(pin);
Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
}
map.entities.push(pinLayer);
map.entities.push(infoboxLayer);
var bestview = Microsoft.Maps.LocationRect.fromLocations(locs);
map.setView({ center: bestview.center, zoom: 14 });
}
function displayInfobox(e) {
pinInfobox.setOptions({ title: e.target.Title, description: e.target.Description, visible: true, offset: new Microsoft.Maps.Point(0, 25) });
pinInfobox.setLocation(e.target.getLocation());
}
</script>
<meta><meta></head><body onload="GetMap();" onfocusout="parent.setEmailRange();" style="overflow-wrap: break-word;">
<div id="map" style="position: relative; width: 800px; height: 650px;"></div>
</body></html>