TEdgeBrowser replaces TWebBrowser. It is new.
TEdgebrowser is supposed to run Javascript and it does.
I took the same code that I used for TWebBrowser, stripped down to its minimum. With Google Maps leaving IE, this is imperitive that we able able to make this work with Edge.
If you run the minimal and fully functional code I've provided (less the API key), you will see this works under TWebBrowser. It works under TWebBrowser because of the HKCU\SOFTWARE\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION fix. But I see nothing in the EdgeBrowser. I do have Edge installed on my machine. I had toggled the FEATURE_BROWSER_EMULATION between IE 11 and Edge. No difference.
I did a search on TEdgeBrowser and Javascript Google Maps and SO said it was removed by moderators without explanation.
Any input would be deeply appreciated.
unit streetMap;
interface
uses
Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,
Dialogs, OleCtrls, SHDocVw, StdCtrls, ExtCtrls, ComCtrls, MSHTML, System.UITypes,
Buttons, IPPeerClient,Vcl.AppEvnts, Winapi.WebView2, Winapi.ActiveX, Vcl.Edge;
type
TfrmStreetMap = class(TForm)
WebBrowser1: TWebBrowser;
EdgeBrowser1: TEdgeBrowser;
Button1: TButton;
procedure FormCreate(Sender: TObject);
procedure FormClose(Sender: TObject; var Action: TCloseAction);
procedure Button1Click(Sender: TObject);
private
{ Private declarations }
HTMLWindow2: IHTMLWindow2;
procedure CreateMap(Sender: TObject);
public
end;
var
frmStreetMap: TfrmStreetMap;
GoogleAPIKey: AnsiString;
implementation
uses
StrUtils;
{$R *.dfm}
const
HTMLStrHeader: AnsiString =
'<html> ' +
'<head> ' +
'<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" /> ' +
'<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.47&callback=initMap"></script> ' +
'<script type="text/javascript"> ' +
'' +
'';
HTMLStr: AnsiString =
' function initialize() { ' +
' var latlng = new google.maps.LatLng(34.000,-84.0000); ' +
' var myOptions = { ' +
' zoom: 15, ' +
' center: latlng, ' +
' mapTypeId: google.maps.MapTypeId.ROADMAP ' +
' }; ' +
' map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); ' +
' ' +
' } ' +
'</script> ' +
'</head> ' +
'<body onload="initialize()"> ' +
' <style> ' +
'#map_canvas { ' +
' height: 100%; ' +
' } ' +
' #map_canvas { ' +
' margin-right: 40px; } ' +
' </style> ' +
' <div id="map_canvas"></div> ' +
'</body> ' +
'</html> ';
procedure TfrmStreetMap.Button1Click(Sender: TObject);
var
ModHTMLStr: AnsiString;
begin
ModHTMLStr := HTMLStrHeader+ HTMLStr;
edgebrowser1.ExecuteScript(HTMLStrHeader+ HTMLStr);
end;
procedure TfrmStreetMap.CreateMap(Sender: TObject);
var
aStream: TMemoryStream;
ModHTMLStr: AnsiString;
begin
try
ModHTMLStr := HTMLStrHeader+ HTMLStr;
WebBrowser1.Navigate('about:blank');
if Assigned(WebBrowser1.Document) then
begin
aStream := TMemoryStream.Create;
try
aStream.WriteBuffer(Pointer(ModHTMLStr)^, Length(ModHTMLStr));
aStream.Seek(0, soFromBeginning);
(WebBrowser1.Document as IPersistStreamInit).Load(TStreamAdapter.Create(aStream));
finally
aStream.Free;
end;
HTMLWindow2 := (WebBrowser1.Document as IHTMLDocument2).parentWindow;
end;
except
on E: Exception do
begin
end;
end;
end;
procedure TfrmStreetMap.FormClose(Sender: TObject; var Action: TCloseAction);
begin
Action := caFree;
end;
procedure TfrmStreetMap.FormCreate(Sender: TObject);
begin
CreateMap(Sender);
end;
end.
The Form code is below:
object frmStreetMap: TfrmStreetMap
Left = 0
Top = 0
BorderStyle = bsSingle
Caption = 'StreetMap'
ClientHeight = 532
ClientWidth = 1035
Color = clBtnFace
Font.Charset = DEFAULT_CHARSET
Font.Color = clWindowText
Font.Height = -11
Font.Name = 'Tahoma'
Font.Style = []
Position = poDesigned
OnClose = FormClose
OnCreate = FormCreate
PixelsPerInch = 96
TextHeight = 13
object WebBrowser1: TWebBrowser
Left = -8
Top = 4
Width = 593
Height = 461
TabOrder = 0
ControlData = {
4C0000004A3D0000A52F00000000000000000000000000000000000000000000
000000004C000000000000000000000001000000E0D057007335CF11AE690800
2B2E126208000000000000004C0000000114020000000000C000000000000046
8000000000000000000000000000000000000000000000000000000000000000
00000000000000000100000000000000000000000000000000000000}
end
object EdgeBrowser1: TEdgeBrowser
Left = 591
Top = 8
Width = 426
Height = 457
TabOrder = 4
end
object Button1: TButton
Left = 792
Top = 496
Width = 145
Height = 25
Caption = 'Load into Edge'
TabOrder = 5
OnClick = Button1Click
end
end