WPF WebBrowser won't show Google Maps

Question

This is a follow up question to this question:

Load local HTML file in a C# WebBrowser

I've created an html file by simply copying the example from this link:

https://developers.google.com/maps/documentation/javascript/examples/marker-simple

When I run it by double clicking the file which opens the regular web browser (i.e Firefox), it works. I then added the HTML to my sln, and change the file's property to always be copied to the output directory. I then tried running it like this:

string curDir = Directory.GetCurrentDirectory();
webBrowser.Navigate(new Uri(String.Format("file:\\{0}\\mymap.html", curDir)));

The browser is opened with the yellow warning on top:

"to help protect your security, your browser has restricted this file from showing active content .."

I'm clicking it, allowing the blocked content, and then I get a message saying there's an error in the script in the page. I'm allowing it to continue, and the browser remains blank.. why is that?

Answer 1

After searching for an answer, I came across this blog entry:

https://weblog.west-wind.com/posts/2011/May/21/Web-Browser-Control-Specifying-the-IE-Version

First of all for the yellow warning, just add this comment line under the html tag of the page:

<!-- saved from url=(0016)http://localhost -->

You can read more about it here:

https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/ms537628(v=vs.85)

Regarding the map and the script error:

It seems like you need to set the WebBrowser's IE version to edge, in order to be able to render HTML5.

set this line as the first one inside the head tag:

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

After these 2 changes, it will work