Google Maps embedded in C# WebBrowser Control shows no Zoom/Satellite Buttons

Question

I have Google Maps embedded in a System.Windows.Forms.WebBrowser control. Up until recently it worked fine. But now the map type buttons (roadmap, satellite, etc) and zoom buttons are not displayed anymore:

Opening the same HTML file directly in IE11 works without a problem (here).

I am doing following to force the embedded IE not to use compatibility mode:

Setting the IE emulation mode for the application in HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION to 2af8.
using <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> in the <head> of the HTML.

I am using .NET Framework 4.5.2. A small example project to reproduce the problem is here: https://github.com/nharrer/gmap-dotnet-example

Here is part of the HTML:

<!DOCTYPE html>
<html>

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

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Testpage</title>

    ....
</head>

<body>
    <div id="map"></div>
    <script>
        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                zoom: 4,
                center: { lat: 48.2081743, lng: 16.37381890000006 }
            });

            var marker = new google.maps.Marker({
                position: { lat: 48.2081743, lng: 16.37381890000006 },
                map: map,
                title: 'Mark1!'
            });

            var marker2 = new google.maps.Marker({
                position: { lat: 50.2081743, lng: 12.37381890000006 },
                map: map,
                title: 'Mark2!'
            });
        }
    </script>

    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAR1yYbZk62bSF0-QWNfVm5FWE_Jpv-ExA&callback=initMap"></script>
</body>

</html>

And here is the c# code that sets the compatibility registry values and initializes the WebBrowser control:

public TestForm()
        {
            FixBrowserEmulation();

            InitializeComponent();

            bool designTime = LicenseManager.UsageMode == LicenseUsageMode.Designtime;
            if (!designTime) {
                mapBrowser.ScriptErrorsSuppressed = false;

                string docFile = Path.Combine(Application.StartupPath, "maptest.html");
                string documentText = File.ReadAllText(docFile);
                mapBrowser.DocumentText = documentText;
            }
        }

        // see: 
        // https://stackoverflow.com/questions/17922308/use-latest-version-of-internet-explorer-in-the-webbrowser-control
        // https://blog.malwarebytes.com/101/2016/01/a-brief-guide-to-feature_browser_emulation/
        private static void FixBrowserEmulation()
        {
            var appName = Process.GetCurrentProcess().ProcessName + ".exe";

            // 11000 (0x2AF8) - Internet Explorer 11. Webpages containing standards-based !DOCTYPE directives are displayed 
            // in IE11 edge mode. Default value for IE11.
            int? mode = 0x2AF8;

            try {
                const string regpath = @"SOFTWARE\\Microsoft\\Internet Explorer\\Main\\FeatureControl\\FEATURE_BROWSER_EMULATION";
                using (RegistryKey regkey = Registry.CurrentUser.CreateSubKey(regpath)) {
                    if (regkey == null) {
                        Debug.WriteLine("Error: Can not access: " + @"HKEY_CURRENT_USER\\" + regpath);
                        return;
                    }

                    var currentMode = regkey.GetValue(appName) as int?;
                    if (currentMode == mode) {
                        Debug.WriteLine("Info: FEATURE_BROWSER_EMULATION is correct.");
                        return;
                    }

                    regkey.SetValue(appName, mode, RegistryValueKind.DWord);

                    currentMode = regkey.GetValue(appName) as int?;
                    if (currentMode == mode) {
                        Debug.WriteLine("Info: FEATURE_BROWSER_EMULATION set to " + currentMode);
                    } else {
                        Debug.WriteLine("Info: FEATURE_BROWSER_EMULATION modification failed. Current value: " + currentMode);
                    }
                }
            } catch (Exception ex) {
                Debug.WriteLine(ex.Message);
            }
        }

Update 2022-06-23: While this question might be of interest for some, it is nowadays recommended to avoid System.Windows.Forms.WebBrowser and switch to WebView2 for Google Maps. WebView2 uses Edge as rendering engine. I think Google Maps doesn't even work in the IE based WebBrowser control anymore.

score 2 · Accepted Answer · answered Aug 29 '18 at 19:30

2

Might be too late but if anyone stumbled upon mentioned issue where zoom and street view controls dissappeared, make sure that you have AllowNavigation property of WebBrowser control set to True. So in this case you should do

mapBrowser.AllowNavigation = true;

answered Aug 29 '18 at 19:30

Alen

373
3
8

You, sir, are a genius. Not too late at all. I ended up overlaying c# controls for zooming and the satellite-toggle. Now, I can finally remove that hack. The map works like it used to with AllowNavigation set to true. Thank you!! – nharrer Aug 30 '18 at 13:51

Google Maps embedded in C# WebBrowser Control shows no Zoom/Satellite Buttons

1 Answers1