Quick Start

From an empty VCL form to a map, in four steps.

1. Get a Google Maps API key

The map is drawn by the Google Maps JavaScript API, which needs an API key from a Google Cloud project with billing enabled. Create one in the Google Maps Platform console and enable at least the Maps JavaScript API. The address search and the markers by address use the geocoding service and the routes use the directions service of the same platform: enable those too if you use them.

Without a key there is no map

ShowMap (and so GotoAddress, GotoLocation and every method that needs the map) raises EGoogleMapError with "you must put your Google API Key into TEdgeGoogleMapViewer.APIKey property" when no key has been registered.

2. Register the key and the temporary folder

Do it once, before the first map is shown - the initialization section of the main form unit is a good place, as in the demo:

initialization
  // Folder where WebView2 keeps its temporary files
  TEdgeGoogleMapViewer.RegisterUserDataFolder(
    System.IOUtils.TPath.GetTempPath + ExtractFileName(ParamStr(0)));

  // Your Google API key
  TEdgeGoogleMapViewer.RegisterGoogleMapsApiKey('<your Google Maps API key>');

The key is shared by every viewer of the application. The MapAPIKey property does the same thing - it sets that same key - so you can also assign it in code, for example from a settings file, in the BeforeShowMap event.

Keep the key out of the source

Read it from a configuration file or from the user's settings, and restrict it in the Google console (by website or application) so that a copy of it is of no use to others.

3. Drop the component

Put a TEdgeGoogleMapViewer (page Ethea of the palette) on the form, set Align to alClient, and add Vcl.GoogleMap to the uses clause if the IDE did not.

4. Show something

procedure TMainForm.FormShow(Sender: TObject);
begin
  EdgeGoogleMapViewer.GotoAddress('Via Santa Cecilia 4, Carugate, Milano');
end;

GotoAddress shows the map if it is hidden, and moves it to the address with a marker. To go to a position:

var
  Location: TLatLng;
begin
  Location.Latitude := 25.767314;
  Location.Longitude := -80.135694;
  EdgeGoogleMapViewer.GotoLocation(Location);
end;

Build and run (32 or 64 bit). If the application starts but raises an error when it shows the map, check that WebView2Loader.dll is next to the executable: see Deploying your application.

Where to go from here

• Showing the map: type, zoom, layers, controls, colour scheme.
• Markers, circles, lines and polygons and routing.
• The demo: everything above, with the code.