Using iframe for google maps embed api in multi device Delphi

Question

Currently I have a code like this to display a google map with my current location in my TWebBrowser

procedure TForm1.LocationSensor1LocationChanged(Sender: TObject; const
    OldLocation, NewLocation: TLocationCoord2D);
begin
  var URLString := Format('https://maps.google.com/maps?q=%s,%s&output=embed', [Format('%2.6f', [NewLocation.Latitude]), Format('%2.6f', [NewLocation.Longitude])]);

  WebBrowser1.Navigate(URLString);
end;

If I use my URL as https://maps.google.com/maps?q=%s,%s then it works properly but when I use my URL as https://maps.google.com/maps?q=%s,%s&output=embed then it will prompt an error "The Google Maps Embed API must be used in an iframe" as shown in the picture

Is there a way I could have an iframe in my delphi project?

Answer 1

As the error message says, Google's embedded map wants to be hosted in an HTML <iframe> . TWebBrowser has a LoadFromStrings() method that you can use for that purpose, eg:

procedure TForm1.LocationSensor1LocationChanged(Sender: TObject;
  const OldLocation, NewLocation: TLocationCoord2D);
begin
  var URL := Format('https://maps.google.com/maps?q=%2.6f,%2.6f&output=embed', [NewLocation.Latitude, NewLocation.Longitude]);
  var HTML = Format('<iframe src="%s" width="%d" height="%d" style="border:0;" allowfullscreen="" loading="lazy"></iframe>', [URL, <DesiredWidth>, <DesiredHeight>]);
  WebBrowser1.LoadFromStrings(HTML, URL);
end;