TMSFNCGoogleMaps wrong top left in Div w HTML Template

WEB TMS WEB Core
1

Hi
I'm testing several test to find a way to solve an issue without positive result
I'm trying to include TMSFNCGooglemaps inside a DIV defined inside an HTML Template.
Each test result with 2 problems

  1. during first webform render, the Maps is displayed with wrong size
  2. after a page resize, the maps adopt the right size but the relative position inside div is wrong with value for top and left (in place for 0)
    image
    image1527×870 154 KB

What can be the way to solve it

Thanks for help
Sylvain

3

Hi,

Can you please make sure to use relative positioning for the TMSFNCGoogleMaps component?

Example:

procedure TForm1.WebFormCreate(Sender: TObject);
begin
  POIMap.ElementPosition := epRelative;
end;
4

Hi,

POIMap is the TMSFNCGoogleMaps it doesn't support "ElementPosition" property

Parent Div with elementposition = eprelative
I tried to apply this property to parent Div but then, the size isn't defined

image
image1200×686 68.1 KB

If I force in debug Elements the height to 400px display is ok

image
image1162×555 133 KB

same behavior by changing height and width style from ssAbsolute to ssPercent

thanks

5

Your previous solution helped me to find the solution

Parent Div has to use ElementPosition = epRelative
But the direct Parent Div has to be defined with at least an height in style

In template, defining Parent Div as

<div id="map" style="height:400px;border: 5px solid;">
</div>

displays the TMSFNCGoogleMaps in right place when rendered.

Thanks

6

unfortunately, if the test project for support request was working fine, it isn't the case for the project I'm working on
In this one the top, left of the for TMSFNCGoogleMaps are populated with values

image
image1583×863 133 KB

The Parent Div is well defined with elementposition = epRelative

Is there a way to for top, left value for TMSFNCGoogleMaps when rendered ?

Thanks

7

After some test it seems I found a solution (but may be not the best)

I use the event OnAfterDraw for TMSFNCGoogleMaps then I set value I wish to find in the for this component

(here TFormView_Carto_TMSFNCGoogleMaps1 is the name inside JS, concat of WebForm Name +"_"+ what seems to be a default TMSFNCGoogleMaps component name, it isn't not the name of component in IDE)

procedure TFormView_Carto.POIMapAfterDraw(Sender: TObject;
  AGraphics: TTMSFNCGraphics; ARect: TRectF);
begin
   asm
      var mapElement=document.getElementById("TFormView_Carto_TMSFNCGoogleMaps1");
      mapElement.style.setProperty("top",0);
      mapElement.style.setProperty("left",0);
      mapElement.style.setProperty("position","relative");
    end;
end;
8

I improved the process to find inside document the FNC Google Map component by scanning the id (based on form+component names) as it can change of number

asm
const mapElement = document.querySelector([id^="TFormView_Carto_TMSFNCGoogleMaps"]);
if (mapElement !== null) {
mapElement.style.setProperty("top",0);
mapElement.style.setProperty("left",0);
mapElement.style.setProperty("position","relative");
}
end;