Delphi + Google Map Api: Using Polyline causes "Script Error"

Question

I've just started programming in Delphi and I have a problem with Google Map Api. I want to have a form with google map and draw lines on it(coordinates from db). Unfortunately when I try to put a 'Polyline' on a map the error occurs an error.

Line: 0

Char: 0

Error: Script error

Code: 0

Url: https://maps.googleapis.com/maps-api-v3/api/js/29/14b/intl/pl_ALL/poly.js

Have no idea how to fix it.

FYI I'm using RAD Studio 10.2 and using TWebBrowser component.

My code:

unit Unit2;

interface

uses
  Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System.Classes, Vcl.Graphics,
  Vcl.Controls, Vcl.Forms, Vcl.Dialogs, Vcl.OleCtrls, SHDocVw, MSHTML ;

type
  TForm2 = class(TForm)
    WebBrowser1: TWebBrowser;
    procedure FormCreate(Sender: TObject);
  private
    { Private declarations }
  public
    Doc: Variant;
    HTMLWindow2: IHTMLWindow2;
    { Public declarations }
  end;

var
  Form2: TForm2;

implementation

{$R *.dfm}

var
  HTMLStr: AnsiString =
'<!DOCTYPE html>' +
'<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">' +
'  <head>' +
'   <meta http-equiv="X-UA-Compatible" content="IE=edge" /> ' +
'    <style>' +
'       #map {' +
'        height: 400px;' +
'        width: 100%;' +
'       }' +
'    </style>' +
'  </head>' +
'  <body>' +
'    <h3>My Google Maps Demo</h3>' +
'    <div id="map"></div>' +
'    <script src="https://maps.googleapis.com/maps/api/js?v=3&key=***&callback=initMap"></script>'+
'    <script>'+
'      function initMap() {' +
'        var map = new google.maps.Map(document.getElementById("map"), {' +
'          zoom: 3,' +
'          center: {lat: 0, lng: -180},' +
'          mapTypeId: "terrain"' +
'        });' +

'        var flightPlanCoordinates = [' +
'          {lat: 37.772, lng: -122.214},' +
'          {lat: 21.291, lng: -157.821},' +
'          {lat: -18.142, lng: 178.431},' +
'          {lat: -27.467, lng: 153.027}' +
'        ];' +
'        var flightPath = new google.maps.Polyline({' +
'          path: flightPlanCoordinates,' +
'          geodesic: true,' +
'          strokeColor: "#FF0000",' +
'          strokeOpacity: 1.0,' +
'          strokeWeight: 2' +
'        });' +

'        flightPath.setMap(map);' +
'      }' +
'    </script>' +
'  </body>' +
'</html>';

procedure TForm2.FormCreate(Sender: TObject);
begin
  if NOT Assigned(WebBrowser1.Document) then
    WebBrowser1.Navigate('about:blank');

  Doc := WebBrowser1.Document;
  Doc.Clear;
  Doc.Write(HTMLStr);
  Doc.Close;
  HTMLWindow2 := (WebBrowser1.Document as IHTMLDocument2).parentWindow;
end;

end.

You are not likely to get an answer here without posting a complete example of the code that does not work. Here is an answer with some examples for how to use Google Maps in a Delphi application: https://stackoverflow.com/questions/10843029/google-maps-non-web-access I echo one of the answers suggesting to use a wrapper. Personally I use the commercial TMS WebGMaps wrapper. — Mark Elder, Oct 12 '17 at 21:56
@MarkElder sorry for not providing sample of code. It's done now. — Mr. XYZ, Oct 12 '17 at 23:55
@JohnEasley No, I'm not using Gmlib, but I'll take a look at this library. — Mr. XYZ, Oct 12 '17 at 23:55

score 1 · Accepted Answer · answered Oct 16 '17 at 20:36

To get your sample to run there are two needed changes:

1) Swap the script tags
Put the line script src="https://maps.googleapis.com/.... after the next script block. Your initMap function needs to be loaded before you load the google maps api. Otherwise it looks for the initMap function and cannot find it.

Once you make that change you will see the map loaded without the line. But then you will see an error on top of the map stating the browser is not supported.

The error message is not clear when run run this in Delphi. But if you save your embed HTML text out to a file and open in Chrome you can see this error message in the javascript console.

2) Enable IE 11 mode for the embedded TWebBrowser.
In my project I was never able to get the doctype or meta tags to get IE to behave properly. However, setting the emulation mode registry flag did work. The flag needs to be set based on your executable file name. I use a value of

"11000": IE11. Webpages containing standards-based !DOCTYPE directives are displayed in IE11 edge mode. Default value for IE11.

Information on the registry key is in the MDSN help page: Internet Feature Controls (B..C), under the Browser Emulation section.

You can also see some discussion in this StackOverflow post "How to have Delphi TWebbrowser component running in IE9 mode?"

Make sure you pay attention to the registry location. Because this is Local Machine you need to be under the WOW6432Node if your application is 32 bit running on a 64 bit OS.

HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION

Add a DWORD value with your exe name (like "project1.exe") and a value of 11000.

Thank you for your answer @MarkElder. I made changes that you had suggested and it's working!. Firstly of course i had placed registry in the wrong location, but at the second approach i made it right and it's working! :) — Mr. XYZ, Oct 24 '17 at 14:28

Delphi + Google Map Api: Using Polyline causes "Script Error"

1 Answers1