Docs
Set-up Maps and Maps-related Services

Set-up Maps and Maps-related Services

Some of our templates include maps-related features powered by Google Maps Platform

atomsbox's templates contains two categories of features related to maps:

  1. UI & Maps: Features to display a map and allow the user to interact with it.
  2. Maps-related Data: Features to retrieve maps-related data from external services (e.g. Places, Routes, Geocoding API).

Based on our current template catalog, you'll find Google Maps and other maps-related features in:

Step-by-step Set-up

If your purchased template includes any of these map functionalities, you'll have to complete a few steps to complete the setup and enable these maps-related features. There are no changes required in the codebase, you'll just have to connect your accounts and credentials.

Here is a step-by-step guide to help you with the setup.

Login or Create an Account on Google Cloud Platform

First, navigate to the Google Cloud Platform (GCP) and sign in with your Google account. If you don’t have a Google account, you’ll need to create one. Once logged in, you'll be able to access the GCP dashboard.

Set Up a New Project and Enable Billing

In the GCP Dashboard, create a new project by selecting the "New Project" option. Give your project a name and, optionally, assign it to an organization. After creating your project, enable billing for it by linking a billing account. This step is mandatory for using Google Maps services.

Enable the APIs

For your project to interact with Google Maps, enable the necessary APIs by navigating to the "APIs & Services" dashboard. Specifically, you'll need to enable:

  1. The Maps SDK for Android to display the maps on Android.
  2. The Maps SDK for iOS to display the maps on iOS.
  3. The Places API (new) to fetch location data and autocomplete suggestions.
  4. The Routes API to fetch directions between locations.
  5. The Geocoding API to convert addresses into coordinates and vice versa.

Enable the APIs

Create an API Key

All of these APIs are paid services, hence, the API are metered (e.g. they track the usage) and required authentication to handle your requests. Therefore, you will have to set-up your API keys on Google Cloud Platform before you can interact with those services.

Create an API key from the "Credentials" section under "APIs & Services." For simplicity, you can use one API key for all services, although in production environments, using separate keys for different services may enhance security and tracking for the cost.

API Keys

Configure google_maps_flutter to display the maps

The dependency has already been added to the project. You can verify it at the rool level of your Flutter project in the pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^latest_version

The package requires platform-specific configuration on iOS and Android to enable map functionality in the app. However, these configurations have already been implemented in the codebase. There is nothing to change from your side, except adding your API key.

  • Android: Add your API key to your Android manifest file within the <application> tag.

    <meta-data android:name="com.google.android.geo.API_KEY"
               android:value="YOUR_API_KEY_HERE"/>
  • iOS: Add your API key to the AppDelegate.swift file in your iOS project.

    import UIKit
    import Flutter
    import GoogleMaps
     
    @UIApplicationMain
    @objc class AppDelegate: FlutterAppDelegate {
      override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
      ) -> Bool {
        GMSServices.provideAPIKey("ADD YOUR API KEY HERE")
        GeneratedPluginRegistrant.register(with: self)
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
      }
    }

If you want to learn more about the set-up, go to the official docs of the package

Configure geolocator

To access the device's location, the template uses the geolocator package. The dependency has already been added to the pubspec.yaml. This library will request permission from users to access their location and provide the app with the current location data.

dependencies:
  geolocator: ^latest_version

All the platform-specific setup is already done in the starter code. If you want to learn more about that, go to the official docs of the package.

However, before you publish the app to the AppStore (iOS), you will need to update the value for NSLocationWhenInUseUsageDescription to describe the reason why your app needs access to the user's location.

<key>NSLocationWhenInUseUsageDescription</key>
<string>This app needs access to location when open.</string>

Grant Access to Your Server to Google Maps Platform

All the interactions between the Google Maps Platform APIs (Routes, Places and Geocoding API) are managed via the backend server. Thefore, you'll need to ensure that it has permission to access the Google Maps services.

With the current implementation, the backend server has access to the API key that is associated with those services, and it will use it everytime it sends a request to one of these.

You will have to add your API key in the file that stores all the environment variables for the backend server.

# Env variables 
IS_PROD=true
PROJECT_ID=YOUR_GCP_PROJECT_ID_HERE
MAPS_API_KEY=YOUR_API_KEY

After you fill the variables in the .env, you will have to use envied and build_runner to complete the set-up. Open the terminal, make sure you are at the root level of the project:

  • Delete the env.g.dart file (path: api/lib/src/env/env.g.dart)
  • Run the following commands in the terminal:
# Navigate the server directory
cd api 
# Clear the code generator cache 
dart run build_runner clean
 
# Run the code generator 
dart run build_runner build --delete-conflicting-outputs

The API key that you have just added will be used in the api/main.dart file:

...

late MapsClient mapsClient;

Future<HttpServer> run(Handler handler, InternetAddress ip, int port) {
  if (Env.IS_PROD) {
    print('Running in production mode');
    mapsClient = GoogleMapsClient(apiKey: Env.MAPS_API_KEY);
  } else {
    print('Running in development mode');
    mapsClient = FakeMapsClient();
  }

  return serve(handler, ip, port);
}

🎉 That's pretty much all. Now, you can use maps and maps-related services in your app! 🎉