How to load HTML content in string to display a map in "CustomResourceBrowser" or "SchemeRegistrationBrowser"

[dandiaalar]

Hi everyone,

First of all, I must mention that I am new to the topic of development with Delphi.

To give some context, I'm trying to integrate google maps into a project using delphi. I'm trying to use one of the CEF4Delphi demos to load the HTML content of the map and the Javascript functionalities that I will use to display the map, place markers and draw the route.

Reviewing the CEF4Delphi demos, I found the one for "CustomResourceBrowser". The problem I found is that, when loading the map, a message was displayed indicating "google is not defined", despite using that code in a separate HTML file and being able to view it without problems.

I took the example "SchemeRegistrationBrowser" and loaded the html code in a string.
Registered the "https" scheme but the result is the same, the map is not displayed. Again, if I right click on the window, view the page code, copy it to a separate file and open it in a browser, the map does display.

In the debug.log file you see this message:
[1101/135806.843:INFO:CONSOLE(1)] "Uncaught SyntaxError: Unexpected token '<'", source: https://maps.googleapis.com/maps/api/js?key=[API_KEY]=myMap (1 ).

I need to upload in this way so that I am not dealing with the HTML file and it can be deleted or modified.

Beforehand thank you very much

[salvadordf]

Hi,

I would debug this issue step by step.

First, try editing the "test.html" file in the bin directory and add your Google maps API key to the last script element. Then run the SchemeRegistrationBrowser demo to test if the map is working.

The test.html file is old and it may have an outdated script source for Google Maps. Please, let me know if it needs to be updated.

[dandiaalar]

Hi,

I have modified the "test.html" file by adding my google maps API_KEY in the last script element. I ran the "SchemeRegistrationBrowser" application and the map is working.

What I haven't quite known how to do is add this same HTML code to a String variable and load it as in the "CustomResourceBrowser" demo, to which I can put HTML and JavaScript code but the only thing it doesn't show is the map.

[salvadordf]

Hi,

The CustomResourceBrowser demo uses a TCustomResourceHandler class to read all resources in the web page.

The Google maps script tries to download the map information and other resources from Google but TCustomResourceHandler is returning the same contents all the time.

The SchemeRegistrationBrowser demo however uses a custom resource handler for the resources that have a "hello" scheme. All the other resources are handled internally by Chromium. This makes it possible to access remote resources through the HTTP protocol.

If the current demo works with your API key then I would suggest to use the SchemeRegistrationBrowser demo and keep using the "hello" scheme.

I would try to modify the SchemeRegistrationBrowser demo first with a modified THelloScheme.ProcessRequest function to load a hardcoded string into the stream instead of reading the "test.html" file.

I just updated CEF4Delphi with some missing code comments for some classes used by SchemeRegistrationBrowser. Update CEF4Delphi from GitHub.

See the ICefResourceHandler code comments for all the information about the custom resource handlers :
https://github.com/salvadordf/CEF4Delphi/blob/d7739269520f284c1d65a6fe8e38894b3d57d5b7/source/uCEFInterfaces.pas#L4873

Read the code comments about all the CEF_SCHEME_OPTION_* constants :
https://github.com/salvadordf/CEF4Delphi/blob/d7739269520f284c1d65a6fe8e38894b3d57d5b7/source/uCEFConstants.pas#L1052
These constants are used when the demo registers the custom resource handler for the "hello" scheme.

[dandiaalar]

hi again,

First of all, an apology if I had not had communication again through this means. I was assigned other priorities and I have barely returned to this topic.

I have updated CEF4Delphi to the latest version you mention from GitHub.

Also, I have tried modifying the HelloScheme to load the stream instead of the html file. However, I have not had positive results, because when loading the FStream variable it seems that at some point it becomes null, since I have carried out the tour and when the instance is created, the value of the stream does arrive, but when I try to load it it does not appear. it does because it reads it as null.

I'm trying to understand the example code for the SchemeRegistrationBrowser and the CustomResourceBrowser, I'm new to this and I still don't get it right.

[salvadordf]

If you're new to Delphi perhaps it would be easier to use WebView4Delphi instead of CEF4Delphi.

You could try the MonacoEditor demo that loads contents from the \assets\monaco directory as if the browser is navigating to https://monaco.editor/