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>
varpinInfobox;
functionGetMap() {
varpushpinInfos = [];
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' };
varinfoboxLayer = newMicrosoft.Maps.EntityCollection();
varpinLayer = newMicrosoft.Maps.EntityCollection();
varapiKey = "<api key>";
varmap = newMicrosoft.Maps.Map(document.getElementById("map"), { credentials:'<api key>' });
// Create the info box for the pushpin
pinInfobox = newMicrosoft.Maps.Infobox(newMicrosoft.Maps.Location(0, 0), { visible:false });
infoboxLayer.push(pinInfobox);
varlocs = [];
for (vari = 0 ; i< pushpinInfos.length; i++) {
locs[i] = newMicrosoft.Maps.Location(pushpinInfos[i].lat, pushpinInfos[i].lng);
varpin = newMicrosoft.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);
varbestview = Microsoft.Maps.LocationRect.fromLocations(locs);
map.setView({ center:bestview.center, zoom:14 });
}
functiondisplayInfobox(e) {
pinInfobox.setOptions({ title:e.target.Title, description:e.target.Description, visible:true, offset:newMicrosoft.Maps.Point(0, 25) });
pinInfobox.setLocation(e.target.getLocation());
}
</script>
<meta><meta></head><bodyonload="GetMap();"onfocusout="parent.setEmailRange();"style="overflow-wrap: break-word;">
<divid="map"style="position: relative; width: 800px; height: 650px;"></div>
</body></html>