javascript - scaleControl not displaying correctly in .net

Question

I am trying to include a scaleControl on a Google Map running in a WebBrowser control in WPF.

Everything works fine, except when I try to enable the scaleControl. It displays as a white box. (see below)

I am initializing the map as follows:

var myOptions =
        {
            zoom: 2,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scaleControl: true
        };
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

If you click the white rectangle, it changes size (as expected when changing units). A screenshot of the rectangle is below.

I believe this issue might be related to the fact I am using the map in a WPF WebBrowser element. As I have seen this issue somewhere else and that was also using WPF.

Any ideas on how to correctly display this scaleControl?

UPDATE:

From DormantOden's answer, I have managed to fix my issue and get the ScaleControl to work.

I went into the registry and added the following values:

HKEY_LOCAL_MACHINESOFTWAREMicrosoftInternet ExplorerMAINFeatureControlFEATURE_BROWSER_EMULATION"MY APP NAME".exe

&

HKEY_LOCAL_MACHINESOFTWAREWow6432NodeMicrosoftInternet ExplorerMAINFeatureControlFEATURE_BROWSER_EMULATION"MY APP NAME".exe

I set the value to 0x2AF7, which according to DormantOden's link, causes the WebBrowser control to run as IE10 instead of IE7.

The scaleControl now renders correctly

Answer 1

I suspect this is due to the WPF WebBrowser element defaulting to rendering with old versions of IE.

See here on how to specify the IE version used. It will likely fix your issue.