How To Add A Google Map To Your Flutter App

Flutter category image

Let’s learn how to add a Google map to your Flutter app and use location services to display the current position.

If your app relies on location data and a map, you can integrate a Google map quite easily. I’ll guide you through the setup process and show you how you can customize the map the way you want it to be. Here is how to add a Google map to your Flutter app.

Installing the package

Run the command flutter pub add google_maps_flutter to install the package. If you are unfamiliar with installing packages, check out the article below for details.

Getting the API key

To use the widget, you need to request an API key.

  • Use the search bar and go to Google Maps Platform
  • Head over to the APIs submenu
  • Select Maps SDK for Android and activate it
Google Maps for Android
Google Maps for Android
  • Select Maps SDK for iOS and activate it
Google Maps for iOS
Google Maps for iOS
  • After enabling the SDKs go to Credentials and create new credentials with the button in the top bar
Google Maps Credentials
Create Google Maps Credentials

Your API key is ready to be used in our Flutter app!

Warning

In a production app, you should read about access limitations for your API key. For this demo, it won’t be necessary. Details can be found here.

Configuring the app

Depending on the platform you want to support, additional configuration steps are required.

✅ (Android) Your minimum Android SDK version must be set to 20 or higher

In your Flutter project directory go to android/app/build.gradle and search for minSdkVersion inside the defaultConfig section. Replace the value (or Flutter variable) with 20.

✅ (Android) Your API key must be added to the application manifest

In your Flutter project directory go to android/app/src/main/AndroidManifest.xml and find the <application... node. Add the following code inside the node and replace the value with your created API key.

XML
 <meta-data android:name="com.google.android.geo.API_KEY"
            android:value="YOUR_API_KEY"/>

✅ (iOS) Your minimum iOS version must be 9.0 or higher

This should already be the case because Flutter itself requires that version. Otherwise, check this article at the step iOS Deployment Target.

✅ (iOS) Your API key must be added to the application delegate

In your Flutter project directory go to ios/Runner/AppDelegate.swift and adjust the code as seen below

Swift
import UIKit
import Flutter
import GoogleMaps

@UIApplicationMain@objcclassAppDelegate:FlutterAppDelegate {
overridefuncapplication(
_ application:UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey:Any]?
  ) -> Bool {
    GMSServices.provideAPIKey("YOUR_API_KEY")
    GeneratedPluginRegistrant.register(with:self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

You have configured your app properly. Let’s move on to integrate a Google Maps widget.

Warning

Newer versions of the package might require different settings. Make sure to check the setup guidelines and adjust your code accordingly.

Adding the widget

To add a map, you can use the following code. It will display a map with the center over Berlin in Europe. For a more complex version, please refer to the GitHub repository with code samples.

There are a lot of properties to configure the map like rotateGesturesEnabled, zoomGesturesEnabled, trafficEnabled, or liteModeEnabled (only for Android). Customize it completely your way!

Handling events

The widget offers various events that you can handle

  • onTap
  • onLongPress
  • onCameraMove
  • onMapCreated

The onMapCreated event returns a GoogleMapController which gives you complete control over the map. Some exposed methods are

  • getLatLng – returns the latitude/longitude combination of a screen position
  • takeSnapshot – returns a byte array of the current map image
  • moveCamera – jumps to a given position (see section “Moving the camera”)
  • animateCamera – moves to a given position (see section “Moving the camera”
  • showMarkerInfoWindow – shows the info window of a given marker (see section “Adding markers”)

Adding markers

The following example will display a rotated blue marker pin in Berlin/Europe.

By default, a tap on the marker centers the map over it. If an InfoWindow is defined, it will be displayed. The onTap event will only be handled if consumeTapEvents is set to true. In that case, the InfoWindow is ignored. You can also use the GoogleMapController to trigger the InfoWindow.

Adding circles

The following example will display a circle around the center of Berlin/Europe.

The radius is denoted in meters. You can adjust the style with fillColor, strokeColor, and strokeWidth and handle the onTap event if required.

Setting custom marker images

The following code sets a custom marker image by using the asset image “icon.png” in Munich/Europe.

Make sure to reference the asset image in your pubspec.yaml file.

Moving the camera

The GoogleMapController (see section “Handling events”) can be used to move the camera so that you can show a specific location to the user. It will either jump (moveCamera) or scroll (animateCamera) to the target position. An example looks like this:

Dart
// jumps to Berlin/Europe
await controller.moveCamera(
    CameraUpdate.newLatLng(LatLng(52.52309894124325, 13.413122125924026)));
// scrolls to Berlin/Europe
await controller.animateCamera(
    CameraUpdate.newLatLng(LatLng(52.52309894124325, 13.413122125924026)));

Showing the current device location

The google maps widget has the property myLocationEnabled. If set to true your current location will be marked as a blue dot on the map. To make this work, your app needs to ask for permission to use location services. If location services are enabled and permission was granted, the location will automatically be displayed. I created a separate article on that topic.

🔔 Hint

You don’t need to install the package, but you need to add the capabilities for Android and iOS. The Google Maps widget has built-in location support without any further requirements.

Source code

The source code is available on GitHub. Be aware that you need to replace the API keys inside the code with your own to make the demo code work!

You can see a screenshot of the app below.

Maps widget of the demo app on GitHub
Maps widget of the demo app on GitHub

Conclusion

In this article, we talked about adding a map to a Flutter application. Though the setup might be a bit time-consuming, it will be worth the trouble. The Google Maps widget is quite powerful and allows you to enrich your app in a very unique way.