Is it possible to use a TTMSFNCGoogleMaps with a HTML Template?

WEB TMS WEB Core
1

Hi,

I'm able to display the FNC Component in my HTML-Template-based web page, but it's always shown in the top left corner.

I have to assign it to a certain DIV but there is no ElementID Property available for FNC Components.
Is there a WebCore Component availabe that I can use as "container"?

Or is there another posibility available?

Thanks for your support
Gerhard

2

Put a TWebHTMLDiv on the form that is the parent for the FNC component and then link the TWebHTMLDiv with the template HTML element.

3

Hi,

in principle this works fine and now I'm able to embedd the map in my TMS Web Core page.

Embedded Map
Embedded Map719×655 179 KB

The green area is the TWebHTMLDiv and I was able to manage via CSS that it is displayed fitting into the current screen size.

In the next step I would like the map to follow the size of the div.

So I tried to set it in Delphi via Align=alClient or 4 Anchors in all directions but as soon as I use Align or Anchors, the map is no longer displayed.

Additionally I tried to assign a CSS class to my map, but again it has no properties ElementID or ElementClassName - so currently I'm one step further but stll stuck at the same problem.

Is there any magic available?

Thanks again for your patience ...
Gerhard

4

In demo under Demo\Web\Embedding , you can see a Google maps being displayed client aligned.
Please compare with this demo.

5

Hi Bruno,

thanks for your advice. I have implemented it (nearly) exactly as in the example you have mentioned.

In principle it works, but I have a redraw problem.

When my Web Core application starts up it looks as shown below:

Embedded Map 1
Embedded Map 1730×582 10.5 KB

You remember, the green box ist the TWebHTMLDiv container for the TTMSFNCGoogleMaps Component.

When I change the size of my browser window (only 1 pixel is a enough) the page renders new and then it's diplayed in the right way:

Embedded Map 2
Embedded Map 2728×583 198 KB

I tried several Delphi like "Invalidates", but nothing helps.
I'm afraid, this has to be solved on HTML/JavaScript side.

There I tried

asm
  setTimeout(() => { window.dispatchEvent(new Event('resize')); }, 0);
end;

but I can't find the right place to implement it :-(

What is the difference between you example and my implementation:

In your example a GoogleMap component (not a FNCGoogleMap Comonent) is put dirctly on the main form.

In my implementation I use a FNCGoogleMaps Component that is hosted inside a TWebHTMLDiv that is inserted at runtime in an HTML Template.

Is there any mechanism available to solve this (hopefully) last problem?

Once again thanks so much for your support ...
Gerhard

6

Maybe try adding that window refresh call to the form's onshow event? Also, the last parameter (0) is the number of milliseconds before the event is dispatched, so you can try increasing that to 1000 or something, if it is firing too early. You don't want it too large as you want it to fire before the final rendering is done, ideally.

7

Without knowing more details and have a project to reproduce this with, it's hard to tell.
Maybe create your TTMSFNCGoogleMaps programmatically from the form's OnShow event?

8

Hi @AndrewSimard, hi @brunofierens ,

it's really good to have two friends in the dark universe of web development :slight_smile:

Finally a

asm
    setTimeout(() => { window.dispatchEvent(new Event('resize')); }, 100);
end;

directly called in the AfterCreate Function of the Form makes it work.

Thanks a lot for your support
Gerhard

2 Likes