0

I have an HTML document containing javascript to show google map. This html file works perfectly when executed alone.

I need to execute it in C# Chromium Browser, but I realised that my web page is returning blank because the javascript was not executed.

This is the HTML File:

<html>
  <head>
    <script type="text/javascript"> 
        function initMap() {
            let map; 
            var address = encodeURIComponent("8G5QVGFV+P9");
            var req = new XMLHttpRequest();
            req.open("GET","https://plus.codes/api?address=CCQCW%2B2F Gafsa&key=<myKEY>",false);
            req.send(null);
            var json_rep = JSON.parse(req.responseText);
            const chicago = { lat: json_rep.plus_code.geometry.location.lat , lng: json_rep.plus_code.geometry.location.lng };


            class CenterControl {
              map_;
              center_;
              constructor(controlDiv, map, center) {
                this.map_ = map;
                goCenterUI.addEventListener("click", () => {
                  const currentCenter = this.center_;

                  this.map_.setCenter(currentCenter);
                });
                setCenterUI.addEventListener("click", () => {
                  const newCenter = this.map_.getCenter();

                  if (newCenter) {
                    this.center_ = newCenter;
                  }
                });
              }
            }
              map = new google.maps.Map(document.getElementById("map"), {
                zoom: 12,
                center: chicago,
              });
              map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
        }
    </script>
  </head>
  
  <body>
    <div id="map" style="width: 100%; min-height: 100vh;"></div>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=<myKEY>&callback=initMap&v=weekly"
      defer
    ></script>
  </body>

I have tried to load an html file without the script it works, the method I used is simple and is not working because the HTML is getting executed and shoen on the ChromiumBrowser But my JavaScript is not so it return black.

public void mapTest() {

            var html = File.ReadAllText(@"C:\Users\Administrator\Desktop\newMap\theMap.html");
            chromeBrowser.LoadHtml(html);
            this.Controls.Add(chromeBrowser);
            chromeBrowser.Dock = DockStyle.Left;

        }

I took a look at this also but I could not manage to make it work:

1)cefsharp execute javascript

2)https://github.com/cefsharp/CefSharp/wiki/General-Usage#when-can-i-start-executing-javascript

Thank you.

jayzee
  • 195
  • 1
  • 17

1 Answers1

0

The LoadHtml method you are using creates a data uri which is only suitable for basic html.

There are multiple overloads for LoadHtml, use LoadHtml(IWebBrowser, String, String) instead. (provide a url for the page to display).

See https://github.com/cefsharp/CefSharp/wiki/General-Usage#loading-htmlcssjavascriptetc-from-diskdatabaseembedded-resourcestream

amaitland
  • 4,073
  • 3
  • 25
  • 63