Google Maps is widely used in a variety of applications, including web apps and mobile apps. It allows users to plan their routes between two points or learn how much time it will take to get to a particular destination (for example, walking or driving), and more.
Every mobile phone now has built-in GPS sensors to determine a user’s location. The user’s location is conveniently displayed on the map with a marker.
How do you request location permissions properly on Android? How do you embed Google Maps with full marker support in Delphi app?
In this article, we will demonstrate how to integrate Google Maps into an Embarcadero Delphi FMX app. We will also show how to retrieve the user’s location coordinates and display them on the map with a marker.
Getting a Google API Key for Working with Google Maps
To use Google Maps in an Embarcadero Delphi FMX app, we need to get a Google API Key. Working with the Maps service without this key is not possible.
To get this key, follow the link https://console.cloud.google.com/getting-started?inv=1&invt=Abhk8w and click “Sign In.”
Select your Google account and log in with your credentials.
Enter a password and click “Next.”
Create a new project.
Then, we create a name for a project and click “Create.”
The project has been successfully created.
We select the project from the list.
Then, click on the menu.
Select “APIs & Services” and “Enable APIs & Services.”
Click “Enable APIs and Services.”
Search for and select “Maps SDK for Android” as we are going to deploy the FMX app on the Android platform.
Click “Enable.”
Then, click “Agree & continue.”
Then, you can go through the verification process by inserting your credit card details, registration address, organization type and so on. This can help ensure a stable service operation.
But you can also return to the project page without entering any personal data.
If you revisit the “Maps SDK for Android” service activation tab, you’ll see that it has been successfully activated even without sharing a bank account or other personal data.
Now we should generate the Google API Key. To do this, we open the Navigational Menu.
Then, click “Credentials.”
Select “Create Credentials.”
Click “API Key.”
Wait for the key generation process to complete.
We have received an API Key. Copy and save it for further use in the Embarcadero Delphi FMX app.
Configuring the Embarcadero Delphi FMX App
To work with Google Maps, we need to add the API Key to the configurations of our Embarcadero Delphi FMX app. To do that, go to Project > Options.
Then, select “Version info.”
Now, we simply paste the generated API Key into the apiKey field and click Save.
Also, to work with Google Maps on the Android platform, we enable the Maps Service. Go to the Entitlement List and check the box for Maps Service to set it to True. Then, click Save.
To determine the user’s location in the Delphi FMX app (Android platform), we need to check the box for Permissions Access Fine Location (precise location tracking using the smartphone’s built-in GPS sensor on Android). Also, we need to allow approximate location tracking via Wi-Fi and mobile communication towers (Access Coarse Location). To do that, simply check the corresponding box. Finally, click Save.
To display and interact with Google Maps in our Embarcadero Delphi FMX app, we use the TMapView component.
To determine the user’s coordinates (latitude and longitude), we use the TLocationSensor component.
We use the TSpeedButton button to switch between map types (normal, satellite or hybrid).
The TCheckBox component is used to enable or disable the TLocationSensor component.
To determine the user’s location, the user should grant location access when the app starts on Android. We need to request permissions for both precise and approximate locations. To do this, we create two string fields for the permission requests.
To ensure proper handling of permissions on the Android platform, the following libraries must be included.
In the OnShow method of the main form, we request permissions for both precise and approximate location access.
The AGrantResults array (of type TClassicPermissionStatusDynArray) contains the user’s response. The user can allow or deny the permissions. To display the user’s choice (granted or denied), we use the TJToast Java wrapper to show a message indicating their decision.
To change the map type (normal, satellite, or hybrid), we use event handlers for TSpeedButton.
To track the user’s location, we handle the OnLocationChanged event. We will display the location using a marker.
To do that, we declare a TMapMarker object.
In the onCreate method of the main form, we will assign the value nil to our marker.
The TCheckBox onChange handler activates or deactivates the TLocationSensor based on its state. If the TCheckBox is checked, the sensor is activated; if not – deactivated.
In the onLocationChange method, we declare two local variables: MyMarkerDescr (of type TMapMarkerDescriptor) for the marker description and myLocation (of type TMapCoordinate) to store the user’s current coordinates.
Just in case, we redraw the TMapView to ensure the map is up to date. Then, check if there is already a marker on the map (FMyLocationMarker = nil).
If not, we update the user’s current coordinates (MyLocation := TMapCoordinate.Create(NewLocation.Latitude, NewLocation.Longitude)).
Next, we set the center coordinates of our map (essentially passing the user’s location coordinates: MapView1.Location := MyLocation).
Then, we create a description of the current location marker using a constructor. As parameters, we pass MyLocation and the marker name ‘I am here -:)’ (MyMarkerDescr := TMapMarkerDescriptor.Create(MyLocation,)).
To configure the marker’s description, we disable moving the marker on the map (Draggable := False). The marker will be visible on the map (Visible := True). Our marker will be three-dimensional (Appearance := TMarkerAppearance.Billboard).
Also, the marker will contain longitude and latitude coordinates (Snippet := Format(‘Lat/Lon: %s,%s’, [FloatToStrF(NewLocation.Latitude, ffGeneral, 4, 2), FloatToStrF(NewLocation.Longitude, ffGeneral, 4, 2)]);).
After that, we add the marker to the map (FMyLocationMarker := MapView1.AddMarker(MyMarkerDescr)).
Then, we increase the zoom level (MapView1.Zoom := 30). If the marker is already on the map, we remove it (FMyLocationMarker.Remove) and assign it the value nil (FMyLocationMarker := nil).
Also, we make our marker responsive to clicks (event TMapView OnMarkerClick). We implement the functionality for displaying the coordinates of the user’s location using TJToast. We identify our marker by its name (we declare the local string variable MarkerTitle).
Demonstrating the Work of the Embarcadero Delphi FMX App on the Android Platform
Let’s demonstrate the work of our Embarcadero Delphi FMX app on the Android platform.
The request for current location determination.
Switching the map type (normal, satellite, or hybrid).
Displaying the marker of the user’s current location.
Marker click processing.
