TMSFNCGoogleMaps execute javascript always return null

FNC TMS FNC Maps
1

Hi,
I am using execute javascript function on TMSFNCGoogleMaps to get ARC PATH (array of points) so i can draw Arc on the map.
i have implemented some code like:

unit uLts;

interface

uses
  Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System.Classes, Vcl.Graphics,
  Vcl.Controls, Vcl.Forms, Vcl.Dialogs, cxGraphics, cxControls, cxLookAndFeels,
  cxLookAndFeelPainters, dxSkinsCore, dxSkinTheBezier, dxLayoutContainer,
  VCL.TMSFNCTypes, VCL.TMSFNCUtils, VCL.TMSFNCGraphics, VCL.TMSFNCGraphicsTypes,
  VCL.TMSFNCCustomControl, VCL.TMSFNCWebBrowser, VCL.TMSFNCMaps,
  VCL.TMSFNCGoogleMaps, cxClasses, dxLayoutControl, VCL.TMSFNCMapsCommonTypes, JSON;

type
  TfrmLts = class(TForm)
    lcLeftGroup_Root: TdxLayoutGroup;
    lcLeft: TdxLayoutControl;
    gmap: TTMSFNCGoogleMaps;
    procedure FormShow(Sender: TObject);
  private
    { Private declarations }
    procedure drawArc(aCenter: TTMSFNCMapsCoordinateRec; aRad: integer;
        aStartAngle: integer; aEndAngle: integer);
  public
    { Public declarations }
  end;

var
  frmLts: TfrmLts;

implementation

var
  gcenter: TTMSFNCMapsCoordinateRec;

{$R *.dfm}

procedure TfrmLts.FormShow(Sender: TObject);
begin
  gcenter := CreateCoordinate(-6.175392, 106.827153);

  gmap.BeginUpdate;
  gmap.DeInitialize;
  gmap.Parent := self;
  gmap.Initialize;
  gmap.AddMarker(gcenter);
  gmap.EndUpdate;

  drawArc(gcenter, 550, 30, 90);
end;

procedure TfrmLts.drawArc(aCenter: TTMSFNCMapsCoordinateRec; aRad: Integer;
    aStartAngle: Integer; aEndAngle: Integer);
var
  js: string;
begin
  js :=
      'function getArcPath(center, radiusMeters, startAngle, endAngle) {'+
        'var point, prev, points = [], a = startAngle;'+
        'while(true) {'+
          'point = google.maps.geometry.spherical.computeOffset(center, radiusMeters, a);'+
          'points.push(point);'+
          'if(a == endAngle) break;'+
          'a++;'+
          'if(a >360) a = 1;'+
        '}'+
        'return points;'+
      '}'+

      'getArcPath('+ GETCENTERCOORDINATEFUNCTION +', '+ IntToStr(aRad) +', '+ IntToStr(aStartAngle) +', '+ IntToStr(aEndAngle) +');';

  gmap.ExecuteJavascript(js,
      procedure(const aVal: string)
      begin
//        if aVal = 'null' then
//          exit;

        ShowMessage(TJSONObject.ParseJSONValue(aVal).Value);
      end
  );
end;

end.

but for every run i always got null result. any idea why is this happening?
thank you

2

Hi,

did you check the console window (F12) for errors? Are you sure the code executes? Perhaps you can add a console.log statement to see what happens?

3

Hi, thanks for responding

i don't get what you mean by checking console window?
my code doesn't have any browser embedded, and the javascript code actually works (i take it from my other web based project) so i want to try to execute that script in TMSFNCMaps.

any other suggestion?
thanks

4

It seems the code being executed in this way does not work otherwise you would get a correct value, not a null value. so we want to see if you got any JavaScript errors. The TMS FNC Google Maps is using a browser, so you can show the browser by pressing F12 when focusing the maps, then you can click on the button that executes the code and see what happens.

5

aaaah, sorry for my foolishness. tmsfncmaps is indeed embedding edge browser to my app.
i am seeing console log right now, trying to figure it out how and why

6

my code above won't work because i need geometry library from google map api. but tmsfncgooglemaps currently doesn't implement it yet. will have to wait for next release if geometry library will be added.

thanks

7

Hi,

We don't need this library internally, so we can't just add it as a requirement for custom code. What you can do is inherit from TTMSFNCMaps and then override the GetHeadLinks method, which you can use to add custom links:

type
  TTMSFNCMapsEx = class(TTMSFNCMaps)
  protected
    procedure GetHeadLinks(AList: TTMSFNCMapsLinksList; ACheckReady: Boolean = True); override;
  end;

implementation

{ TTMSFNCMapsEx }

procedure TTMSFNCMapsEx.GetHeadLinks(AList: TTMSFNCMapsLinksList;
  ACheckReady: Boolean);
begin
  inherited;
  AList.Add(TTMSFNCMapsLink.CreateScript('https://mylink.js'));
end;
8

hi, thanks for your help, those give me more idea.
and one think for sure, actually you can append geometry parameter (tested on TMSFNCGoogleMaps) in ApiKey like this:

blablablaAPIKEYblablabla&libraries=drawing,geometry
9

Thanks for the input, if you need more help please let us know.

10

This topic was automatically closed 60 minutes after the last reply. New replies are no longer allowed.