c# google maps api - javascript errors on the html part

Question

I newly want to use the googlemap api to display some markers on a map in a simple C# windows form with visual studio.

I use a "web browser" component to display a generated html file with the basic html code from google plus customized coordinate.

        const string htmlPath = "D:/map.html";
        StreamWriter sw = new StreamWriter(htmlPath, false, System.Text.Encoding.GetEncoding(437));

        string centerLongitude = centerLongitudeTextBox.Text;
        string centerLatitude = centerLatitudeTextBox.Text;




        sw.WriteLine("<!DOCTYPE html>");
        sw.WriteLine("<html>");

        sw.WriteLine("<head>");
        sw.WriteLine("<meta charset=\"utf-8\">");

        sw.WriteLine("<style>");
        sw.WriteLine("html, body, #map{");
        sw.WriteLine("margin :0;");
        sw.WriteLine("padding: 0;");
        sw.WriteLine("height: 100%");
        sw.WriteLine("}");
        sw.WriteLine("</style>");

        //sw.WriteLine("<link rel=\"stylesheet\" href=\"/maps/documentation/javascript/demos/demos.css\">");
        sw.WriteLine("</head>");

        sw.WriteLine("<body>");

        sw.WriteLine("<div id=\"map\"></div>");

        sw.WriteLine("<script>");
        sw.WriteLine("function initMap() {");
        sw.WriteLine("// Create a map object and specify the DOM element for display.");
        sw.WriteLine("var map = new google.maps.Map(document.getElementById('map'), {");
        sw.WriteLine("center: { lat: "+ centerLatitude +", lng: "+ centerLongitude +"},");
        sw.WriteLine("scrollwheel: false,");
        sw.WriteLine("zoom: 8");
        sw.WriteLine("});");
        sw.WriteLine("}");
        sw.WriteLine("</script>");

        sw.WriteLine("<script src=\"https://maps.googleapis.com/maps/api/js?key=MYKEY of course&callback=initMap\"");

        sw.WriteLine("async defer></script>");

        sw.WriteLine("</body>");

        sw.WriteLine("</html>");
        sw.Close();

        webBrowser1.Navigate("file:///" + htmlPath);

This code is working good, but my application text me that java script generate errors.

Can you give me some help, i don't understand why there is this error and finding topics or code exemple is hard.

Thanks you for reading me.

Error

I'd advise using the development tools built into both IE and Chrome to do some initial triage on this first. You can set up breakpoints and walk through the code. You might be able to spot where the point of failure is. Apologies if you've done this already. — amadan, Nov 08 '16 at 12:35
Looks like that error is coming from one of the JS files served by Google. Does it happen in other browsers too? Edit: oh my bad, you're using a custom HTML view. Can you export your HTML and try it in a different browser? — JVDL, Nov 08 '16 at 12:36
the application save the html content as a file in d:\map.html, i've try to open it in Chrome and IE, this works fine and don't generate js errors. Thanks for commenting — Nicolas Bishop, Nov 08 '16 at 13:01
Maybe something related to the visual studio configuration, i precise that i run in it in debug mode — Nicolas Bishop, Nov 08 '16 at 13:02
It seems to happen only when my mouse is on the web browser part. If i close the error and continue using the app, the same error come again when my mouse enter the web browser part. — Nicolas Bishop, Nov 08 '16 at 13:07

score 0 · Accepted Answer · edited May 23 '17 at 10:32

I understand your application uses Web Browser control that emulates a certain version of IE.

Please note that the current release version of Maps JavaScript API doesn't support neither old IE versions nor compatibility mode. You should use supported browsers as mentioned in the document:

https://developers.google.com/maps/documentation/javascript/browsersupport

If you are working with WebBrowser controls, it can default to an IE 7 rendering mode: https://weblog.west-wind.com/posts/2011/May/21/Web-Browser-Control-Specifying-the-IE-Version

As you can see from the above article, you can write something in the registry to force the control to a newer IE version. It is recommended to specify at least version 10.

http://www.codeproject.com/Articles/793687/Configuring-the-emulation-mode-of-an-Internet-Expl Use latest version of Internet Explorer in the webbrowser control

Additionally, you can add the meta tags like

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

or

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

in your html page header section in order to force rendering mode for the modern version of IE.

As an alternative solution you can consider a different web browser embedded control. For example, you can look at Chromium Embedded Framework.

https://en.wikipedia.org/wiki/Chromium_Embedded_Framework

There is a useful discussion in the public issue tracker as well:

https://code.google.com/p/gmaps-api-issues/issues/detail?id=9004

Thank you, i just read you. I will read your links and a totaly understand what you awnsered to me. Thanks you ! I will tell if this working and maybe migrate to chromium fw — Nicolas Bishop, Nov 13 '16 at 10:39
Perfect, changing the version of the emulated IE in the registry works fine ! Thanks you again ! — Nicolas Bishop, Nov 13 '16 at 10:51

c# google maps api - javascript errors on the html part

1 Answers1

Linked