Integrating Google Maps in a Flutter App: A Step-by-Step Guide
A Comprehensive Tutorial on Adding Google Maps to Your Flutter App
If you’re building a mobile app that requires location-based services, then integrating Google Maps into your Flutter app is a great idea. Google Maps offers rich features, including maps, satellite imagery, street view, and real-time traffic updates, making it a popular choice among developers.
Google Maps is a popular mapping platform that can enhance your Flutter app's user experience. In this article, We’ll cover everything from setting up your Google Cloud Platform account to displaying the map in your app
Prerequisites
Before we get started, there are a few things you’ll need:
- A Google Cloud Platform account
- A Flutter project
- A Google Maps API key
Step 1: Create a Google Cloud Platform account
You’ll need to create a Google Cloud Platform account to use Google Maps in your app. If you already have one, skip to the next step.
- Go to the Google Cloud Platform Console (https://console.cloud.google.com/)
- Sign in with your Google account or create a new one if you don’t have one already.
- Create a new project by clicking the “Select a project” dropdown at the top of the screen and selecting “New project”. Give your project a name and click “Create”.
Step 2: Enable the Google Maps Platform API
- In the Cloud Console, go to the “APIs & Services” > “Library” tab.
- Search for “Maps SDK for Android” and “Maps SDK for iOS” and enable both APIs.
- Next, go to the “Credentials” tab and click on “Create credentials”. Select “API key”.
- Copy your API key and keep it safe. We’ll use it later.
Step 3: Add the Google Maps Flutter plugin
- The first step is to create a new Flutter project using your preferred IDE or the command line. Once you have created the project, you can proceed with the following steps.
- Add the Google Maps Package
- Next, you need to add the Google Maps package to your project. To do this, you can add the following dependency to your pubspec.yaml file:
dependencies:
flutter:
sdk: flutter
google_maps_flutter: ^1.2.0After adding the dependency, run the following command in your terminal:
flutter pub get This will download and install the Google Maps package.
Step 4: Set up the map view
Open your app’s main.dart file and add the following code:
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Google Maps Demo',
home: Scaffold(
appBar: AppBar(
title: Text('Google Maps Demo'),
),
body: GoogleMap(
initialCameraPosition: CameraPosition(
target: LatLng(23.0225, 72.5714),
zoom: 12,
),
),
),
);
}
}- Replace LatLng(23.0225, 72.5714) with the latitude and longitude of the location you want to display on the map.
Step 5: Add the API key
Return to your Google Cloud Platform account and find the API key you created in Step 2.
Once you have obtained an API key, you need to configure it in your app. To do this, add the following code to your AndroidManifest.xml file (for Android) or your Info.plist file (for iOS):
Android:
In order to integrate Google Maps into your app using the API key that you generated in the previous step, you will need to follow the instructions provided and copy and paste the necessary code
First, open your Flutter project and navigate to the file at this location: android/app/src/main/AndroidManifest.xml.
Next, paste the code below:
<application>
<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="YOUR_API_KEY_HERE" />
</application>
iOS:
The process of implementing Google Maps in a Flutter app for iOS devices is similar to that of Android.
The initial step involves defining your API key within the application delegate. ios/Runner/AppDelegate.swift
import UIKit
import Flutter
import GoogleMaps
@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
override func application(
_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
GeneratedPluginRegistrant.register(with: self)
GMSServices.provideAPIKey("YOUR-KEY")
return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}
}After specifying the API key in the application delegate, the next step is to open Xcode and include location permission in the info.plist file
<key>io.flutter.embedded_views_preview</key>
<true/>
<key>NSLocationWhenInUseUsageDescription</key>
<string>This app needs access to location when open.</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>This app needs access to location when in the background.</string>
<key>NSLocationAlwaysUsageDescription</key>
<string>This app needs access to location when in the background.</string>
<key>NSContactsUsageDescription</key>
<string>This app needs access to contacts to show them on the map.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>This app needs access to photos to show them on the map.</string>
<key>NSCameraUsageDescription</key>
<string>This app needs access to the camera to show photos on the map.</string> Now that you have configured the API key, you can display the map in your app
Conclusion
Throughout this tutorial, we have demonstrated the process of integrating Google Maps into your Flutter app and highlighted several ways to personalize and adjust the appearance of your map. We have covered the necessary steps for enabling the Maps API, generating and controlling API keys, and configuring, customizing, and manipulating maps in your Flutter application.
By incorporating Google Maps into your app, you can unlock a wealth of possibilities. With the fundamentals now at your disposal, you are well-equipped to start building location-based features and interactive maps into your Flutter application
Thank you for reading.
