top of page

A Brief Guide for Integrating Google Maps in Flutter

A Brief Guide for Integrating Google Maps in Flutter

Google Maps is a widely used tool for displaying interactive maps and location data in mobile applications. Flutter, a popular open-source UI framework, allows developers to create beautiful and functional cross-platform apps.

In this blog post, we will walk you through the process of integrating Google Maps into a Flutter app.


Before we dive into the integration process, make sure you have the following prerequisites:

  1. Flutter SDK installed on your machine.

  2. A Google Cloud Platform (GCP) account with the Maps JavaScript API enabled.

  3. An Android or iOS emulator or a physical device for testing.

Step 1: Set Up a New Flutter Project

If you haven't already, create a new Flutter project using the following command:

flutter create google_maps_flutter_app
cd google_maps_flutter_app

Step 2: Add Dependencies for Google Maps

Open the pubspec.yaml file in your project and add the necessary dependencies for Google Maps integration:

    sdk: flutter
  google_maps_flutter: ^2.5.0
  location: ^5.0.3

After adding the dependencies, run the following command to fetch and install them:

flutter pub get

Step 3: Configure API Key

Visit the Google Cloud Console and create a new project. Then, enable the "Maps JavaScript API" for your project.

Once done, generate an API key for your application.

Open the AndroidManifest.xml file located at android/app/src/main/AndroidManifest.xml and add your API key within the <application> tag:


For iOS, open the AppDelegate.swift file located at ios/Runner/AppDelegate.swift and add the following code within the application(_:didFinishLaunchingWithOptions:) method:


Step 4: Set Up Permissions

To use location services on Android and iOS, you need to configure the necessary permissions. Open the AndroidManifest.xml file and add the following permissions:

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

For iOS, open the Info.plist file located at ios/Runner/Info.plist and add the following keys:

<string>We need your location to display on the map.</string><key>NSLocationAlwaysUsageDescription</key>
<string>We need your location to display on the map.</string>

Step 5: Implement Google Maps

Create a new Dart file named google_maps_screen.dart in your lib directory. In this file, import the necessary packages:

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:location/location.dart';

Now, create a stateful widget called GoogleMapsScreen:

class GoogleMapsScreen extends StatefulWidget {
  _GoogleMapsScreenState createState() => _GoogleMapsScreenState();

class _GoogleMapsScreenState extends State<GoogleMapsScreen> {
  GoogleMapController? _mapController;
  Location _location = Location();
  LatLng _initialPosition = LatLng(0, 0);

  void initState() {
    _location.getLocation().then((locationData) {
      setState(() {
        _initialPosition = LatLng(locationData.latitude!, locationData.longitude!);

  void _onMapCreated(GoogleMapController controller) {
    _mapController = controller;

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google Maps Integration'),
      body: GoogleMap(
        onMapCreated: _onMapCreated,
        initialCameraPosition: CameraPosition(target: _initialPosition, zoom: 15),
        myLocationEnabled: true,
        compassEnabled: true,

Step 6: Add Navigation

Open the main.dart file and modify the main function to point to the GoogleMapsScreen widget:

void main() {

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Google Maps Flutter',
      theme: ThemeData(
      home: GoogleMapsScreen(),

Step 7: Run the App

Now you're ready to test your Google Maps integration! Run your Flutter app using your preferred emulator or physical device:

flutter run

Your app should open, displaying a map centered around your current location.

Congratulations! You've successfully integrated Google Maps into your Flutter app. You can now customize the map's appearance, add markers, and implement various interactive features to enhance the user experience.

Remember to refer to the official Google Maps Flutter documentation for more advanced features and customization options.

Happy coding!


Blog for Mobile App Developers, Testers and App Owners


This blog is from Finotes Team. Finotes is a lightweight mobile APM and bug detection tool for iOS and Android apps.

In this blog we talk about iOS and Android app development technologies, languages and frameworks like Java, Kotlin, Swift, Objective-C, Dart and Flutter that are used to build mobile apps. Read articles from Finotes team about good programming and software engineering practices, testing and QA practices, performance issues and bugs, concepts and techniques. 

Monitor & Improve Performance of your Mobile App


Detect memory leaks, abnormal memory usages, crashes, API / Network call issues, frame rate issues, ANR, App Hangs, Exceptions and Errors, and much more.

Explore Finotes

bottom of page