Google maps customization

Hello!


Is possible to customize Google maps via external commands. for example, I would liek to disable the default GUI buttons as described in this article:

https://developers.google.com/maps/documentation/javascript/examples/control-disableUI

Is possible to do this (and other) in WebCore?

Kind regards,
Dino

You can descend from TWebGoogleMaps and then call the protected method GetMap to get the HTML element for the Google maps and you can do manipulations on it from there.

Ok, I'll try. 


Thank you!

Hmmm.. I have some problems.. can you give me an example to start..?

I tried to do like this:


unit WebOkoljeMap;

interface

uses
  Classes, WEBLib.Controls, WEBLib.Graphics, SysUtils, Web, JS, WEBLib.WebCtrls;

type
  TWebOkoljeMaps = class(TWebGoogleMaps)
  private
  protected
  public
    procedure CustomizeGui;
  end;

implementation

{ TWebOkoljeMaps }

procedure TWebOkoljeMaps.CustomizeGui;
var map: TJSHTMLElement;
begin
  map := GetMap;
  map.style.setProperty('disableDefaultUI', 'true');
end;

end.

With this customization I can't compile the program. I added WebOkoljeMap to the uses part in the form where I want to use maps, here's the code snippet:


unit Map;

interface

uses
  System.SysUtils, System.Classes, WEBLib.Graphics, WEBLib.Controls, WEBLib.Forms, WEBLib.Dialogs,
  WEBLib.WebCtrls, Vcl.Controls, Okolje.Maps, WEBLib.ExtCtrls;

type
  TfrmMap = class(TWebForm)
    geoLocation: TWebGeoLocation;
    tmrStart: TWebTimer;
    mapGoogle: TWebOkoljeMaps;
//    mapGoogle: TWebGoogleMaps;
    panUp: TWebPanel;
    procedure geoLocationGeolocation(Sender: TObject; Lat, Lon, Alt: Double);
    procedure tmrStartTimer(Sender: TObject);
    procedure mapGoogleMapPan(Sender: TObject; Lon, Lat: Double);
    procedure mapGoogleMapZoom(Sender: TObject; ZoomLevel: Integer);
    procedure mapGoogleMapClick(Sender: TObject; Lon, Lat: Double);
  end;

var
  frmMap: TfrmMap;

I also changed in the dfm file, but the compiler shows an error 

Identifier not found TOkoljeMaps

It's strange, because I haven't declared TOkoljeMaps, but TWebOkoljeMaps that descends from TWebGoogleMaps (TWebOkoljeMaps = class(TWebGoogleMaps)..).

Please help! :)


Create your descending class as:

TOkoljeMaps = class(TWebGoogleMaps);

and add the class definition 

TWebOkoljeMaps  = class(TOkoljeMaps);

and use

TWebOkoljeMaps 

Ok, thank you!


I (wel, we.. :) ) made some progress, but still, there is a problem. After calling CustomizeGUI I get this error:

ERROR
Uncaught TypeError: map.setAttribute is not a function | TypeError: map.setAttribute is not a function at Object.CustomizeGui (http://localhost:8000/Okolje24/Okolje24.js:25909:13) at Object.mapGoogleMapClick (http://localhost:8000/Okolje24/Okolje24.js:33790:22) at Object.cb [as FOnMapClick] (http://localhost:8000/Okolje24/Okolje24.js:222:26) at Object.HandleMapClick (http://localhost:8000/Okolje24/Okolje24.js:24978:42) at hh.cb (http://localhost:8000/Okolje24/Okolje24.js:222:26) at Td.A (https://maps.googleapis.com/maps/api/js?key=AIzaSyAtf_nj105Bqk_KakmimUR7WjrEqCUkHlU&callback=initMapTfrmMap_OkoljeMaps7:168:364) at Object._.S.trigger (https://maps.googleapis.com/maps/api/js?key=AIzaSyAtf_nj105Bqk_KakmimUR7WjrEqCUkHlU&callback=initMapTfrmMap_OkoljeMaps7:165:332) at du (https://maps.googleapis.com/maps-api-v3/api/js/37/10a/intl/sl_ALL/map.js:30:51) at au (https://maps.googleapis.com/maps-api-v3/api/js/37/10a/intl/sl_ALL/map.js:27:415) at Object.onClick (https://maps.googleapis.com/maps-api-v3/api/js/37/10a/intl/sl_ALL/map.js:26:484)

Did I missed how to set attributes...?

procedure TOkoljeMaps.CustomizeGui;
var map: TJSHTMLElement;
begin
  map := self.GetMap;

  if Assigned(map) then begin
    map.setAttribute('disableDefaultUI', 'true');
  end;
end;

I have not studied the Google Maps API for what you want to achieve.


The Google Maps API methods can be executed on this object, here for example to set the zoom factor:

var
  map: TJSHTMLElement;
begin
  map := GetMap;
  asm
    map.setZoom(zoom);
  end;
end;

I suspect you will need to do something similar for what you want to achieve.

OK, thank you

Hi!


Just to share my solution.

I've hidden the GUI with this 

procedure TOkoljeMaps.CustomizeGui;
var map: TJSHTMLElement;
begin
  map := self.GetMap;
  asm
    map.setOptions({disableDefaultUI:true});
  end;
end;

Thank you again for the help.

OK, now everything is working, I have just one small problem: when I try to show the form in design-time, I get this error:


Error reading form frmMap
Class TWebOkoljeMaps not found. Ignore error and continue?

I solved this problem by creating mapGoogle object in run-time and leaving the form without this component at design time. If anyone has a better solution...

For the design-time, you need to create a stub class and register it as VCL component TWebOkoljeMaps. Then it will be available at design-time.