Home "an error has occured in the script on this page" when trying to display htm file through xaml api

Questions

"an error has occured in the script on this page" when trying to display htm file through xaml api

July 5, 2022

This might be a little too specific, but whenever I run this code, I get an error.

private void WebBrowser_Clicked(object sender, RoutedEventArgs e)
        {
            wb.Navigate("C:/Users/intern3/source/repos/MarketingProject/Samples/WPF/RESTToolkitTestApp/index.htm");
        }

wb is the name of a WebBrowser element in a XAML file.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=AgCKDO35_SFD68BDTuy_{my key}' async defer></script>
    <script type='text/javascript'>
        var map;
        var coords = '<%=coords%>';

       function GetMap() {

        map = new Microsoft.Maps.Map('#myMap', {center: new Microsoft.Maps.Location(55, 0)});
        
        //Create a pushpin.
        var pushpin1 = new Microsoft.Maps.Pushpin(map.getCenter());
        map.entities.push(pushpin1);

        //Add mouse events to the pushpin.
        Microsoft.Maps.Events.addHandler(pushpin1, 'click', function () { highlight('pushpinClick'); });
        Microsoft.Maps.Events.addHandler(pushpin1, 'mouseover', function () { highlight('pushpinMouseover'), showinfo('address'); });
    }

    function highlight(id) {
        //Highlight the mouse event div to indicate that the event has fired.
        document.getElementById(id).style.background = 'LightGreen';
        setTimeout(function () { document.getElementById(id).style.background = 'white'; }, 1000);
    }

    function showinfo(id)
    {
        document.getElementById(id).style.background = 'LightGreen';
        setTimeout(function () { document.getElementById(id).style.background = 'white'; }, 1000);
        document.getElementById(id).textContent = coords;
    }
    </script>
...

There are other div elements that display, but it’s just the map that doesn’t.

>Solution :

If you are using the old WPF WebBrowser control be sure to add <meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE=edge" /> to the head of your page. If you don’t it will use IE6 rendering which isn’t supported by Bing Maps. This is documented here: https://docs.microsoft.com/en-us/bingmaps/v8-web-control/articles/cross-platform-bing-maps-v8-apps#using-bing-maps-v8-in-winform-and-wpf-apps