TMSFNCGoogleMaps wrong top left in Div w HTML Template

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)

What can be the way to solve it

Thanks for help


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


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


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

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

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


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;">

displays the TMSFNCGoogleMaps in right place when rendered.


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

The Parent Div is well defined with elementposition = epRelative

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


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);
      var mapElement=document.getElementById("TFormView_Carto_TMSFNCGoogleMaps1");"top",0);"left",0);"position","relative");

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

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