Directions for Flutter – Google Directions + Maps (Android & iOS)

This tutorial on how to implement Google directions in your Flutter mobile application will give you all the needed answers to start building your functionality over Google Maps and Direction services.

We will cover the next topics:

1. Fun facts
2. Enabling Maps and Directions in Google Developer Console
3. Creating Google Maps and Directions API keys
4. Adding Google Maps API key to your Flutter app
   1. Android implementation
   2. iOs implementation
5. Implement Location permissions
   1. Android permissions
   2. iOs permissions
6. Adding Google Maps widget
7. Getting Directions between two places (coordinates)

1. Fun Facts

Did you know that Google Maps are embedded on more than four million (yes, 4.000.000) websites worldwide? Google with map services has about 64% market share and provides about 1 billion (1.000.000.000) kilometers of routes daily.

Now that you know all these interesting facts, it’s time to see how you can use this powerful service in your flutter app.

2. Enabling Maps and Directions in Google Developer Console

Since 2018. Google Maps API is not free, so to use it, you need to enable it. It’s a pretty straightforward process if you know what you’re doing.

First of all log into your Google Developer Console, sign in, if you’re not already signed in, and choose the Select a project option, with an arrow down (see the image below).

Now you should have a modal window that looks like the next image, and if you don’t have any projects you should see a blank window and chose the option New project, define your project name, and hit the Create button.

After this, you need to add Maps and Directions services to your GDC (Google Developer Console). Go to the link, in the search bar type in “Maps SDK” and then “Directions API” or just go to the next links and enable services:

• Maps SDK for Android
• Maps SDK for iOs
• Directions API

If you’re developing an app only for Android or only for iOs, activate the only SDK for the platform you’re developing for.

3. Creating Google Maps and Directions API keys

The next thing you need to do is to enable needed APIs and create API keys. Pick the Credentials from APIs & Services option in the left drawer (behind the hamburger menu).

Pick the API key option from the Create Credentials link at the top of the screen (do it three times (one per platform for maps + one for directions)).

If you did everything right, you should see something like the following image:

Next step is to properly configure every API key:

API key 1	Maps SDK for Android
API key 2	Maps SDK for iOs
API key 3	Directions API

Let’s start with API key 1 and configure it as Maps SDK for Android, click at the key name, and when the new panel loads, change the key name to “Maps SDK for Android”, set Application restrictions to the Android apps, and then select the “Maps SDK for Android” under the API restrictions input field.

For API key 2 do the same as for API key 1, just replace word Android with iOs. Later we will come back to secure APIs and reconfigure the restrictions.

Now it’s the turn for the Directions API, rename it as the previous two, and just select the Directions API under the API restrictions input field.

Your credentials now should look like this:

4. Adding Google Maps API key to your Flutter app

I’ll assume that you already created a Flutter project and created a blank screen (or you may have built an application that just is missing maps, that’s okay too.). After the setup process you will need to install the following plugins:

• google_maps_flutter
• flutter_polyline_points
• location

Add those plugins to your pubspec.yaml file and run the command:

flutter pub get

. . . and then:

flutter pub upgrade

pubspec.yaml in your project should look something like:

Now it’s time to do some platform configurations on your Flutter project:

Android – Google Maps for Flutter implementation:

For the Android platform, we will add Google Maps for Android API key, obtained from Google Cloud Console, into AndroidManifest.xml (located at app/src/main/AndroidManifest.xml), under application tag.

<manifest ...
  <application ...
    <meta-data android:name="com.google.android.geo.API_KEY"
               android:value="GOOGLE_MAPS_FOR_ANDROID_API_KEY"/>

After you added this line of code, your AndroidManifest.xml file should look something like:

Don’t worry, I already disabled Google Maps for Android API key that is exposed in embedded file.

Google Maps should be working now on the Android device or emulator.

iOs – Google Maps for Flutter implementation

For the iOs platform, it’s necessary to do some tweaking in the AppDelegate.m file. If your project is using Objective C programming language, you should edit the file ios/Runner/AppDelegate.m import GoogleMaps/GoogleMaps.h and in launchOptions add the following line:

[GMSServices provideAPIKey:@"GOOGLE_MAPS_FOR_ANDROID_API_KEY"];

. . . with so your file looks something like this:

On the other hand, if you’re using Swift in your project, you should add a few lines of code in the AppDelegate.swift. Find your file in the following path ios/Runner/AppDelegate.swift, import import GoogleMaps and add next line

GMSServices.provideAPIKey("GOOGLE_MAPS_FOR_IOS_API_KEY")

. . . inside launchOptions. If you did everything right, your file should look something like this:

Okay, now you should be able to implement Google Maps widget into the app, but first . . .

5. Implement Location permissions

Location plugin requires location permissions implemented into your app, so you will need to implement them separately on the Android and iOs platform (the same as Google Maps plugin).

Android – Location permissions

On the Android platform, you add new permissions inside AndroidManifest.xml file located inside app/src/main/AndroidManifest.xml, almost the same as the previous, just one tag level above:

<manifest ...
  <uses-permission android:name="android.permission.INTERNET" />
  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

Your AndroidManifest.xml file should now look like this:

You probably see that we added permissions for the internet too, well internet permission is needed to download maps data and to get polygon directions for flutter application.

iOs – Location permissions

On the iOs platform, you need to add permission messages in Info.plist file located inside ios/Runner/Info.plist:

<key>NSLocationAlwaysUsageDescription</key>
<string>Will you give me your location always?</string>

<key>NSLocationWhenInUseUsageDescription</key>
<string>Will you give me your location when app in use?</string>

<key>io.flutter.embedded_views_preview</key>
<true/>

If you did everything right your Info.plist file should look like:

Now it’s the time for some dart code and Google Maps widget implementation.

Adding Google Maps widget into flutter application

Now that you made all the necessary preparations in your flutter projects, it’s time to add Google Maps widget to your app’s screen.

To be continued …