Skip to content

Integrating Google Maps in Flutter: A Comprehensive Guide

Google Maps is an essential tool for many mobile applications, providing location-based services and interactive maps. In this guide, we’ll explore how to integrate Google Maps into your Flutter application using the google_maps_flutter plugin.

Introduction to google_maps_flutter

The google_maps_flutter plugin is a powerful tool that allows Flutter developers to embed Google Maps into their applications. It provides a widget that renders Google Maps and offers various customization options.

To get started, add google_maps_flutter as a dependency in your pubspec.yaml file:

    sdk: flutter
  google_maps_flutter: ^2.2.5

Setting Up Google Maps API

Before you can use Google Maps in your Flutter app, you need to set up the Google Maps API:

  1. Visit the Google Cloud Console.
  2. Create a new project or select an existing one.
  3. Enable the Google Maps SDK for Android, iOS, and Web.
  4. Generate an API key.

For a detailed walkthrough of this process, check out our guide on /setting-up-google-cloud-project-for-flutter-apps.

Platform-Specific Configuration

Android Configuration

  1. Set the minSdkVersion to 20 or higher in android/app/build.gradle:
android {
    defaultConfig {
        minSdkVersion 20
  1. Add your API key to android/app/src/main/AndroidManifest.xml:
<manifest ...
  <application ...
    <meta-data android:name=""

iOS Configuration

Add your API key to ios/Runner/AppDelegate.swift:

import UIKit
import Flutter
import GoogleMaps

@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)

Web Configuration

For web support, add the Google Maps JavaScript API to your web/index.html:

<script src=""></script>

For more details on web configuration, visit the google_maps_flutter_web README.

Implementing Google Maps in Flutter

Now that we’ve set up the plugin and configured our platforms, let’s implement Google Maps in our Flutter app.

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

class MapScreen extends StatefulWidget {
  _MapScreenState createState() => _MapScreenState();

class _MapScreenState extends State<MapScreen> {
  GoogleMapController? mapController;

  final LatLng _center = const LatLng(45.521563, -122.677433);

  void _onMapCreated(GoogleMapController controller) {
    mapController = controller;

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google Maps Demo'),
      body: GoogleMap(
        onMapCreated: _onMapCreated,
        initialCameraPosition: CameraPosition(
          target: _center,
          zoom: 11.0,

This code creates a basic Google Map centered on Portland, Oregon. You can customize the initial location by changing the _center coordinates.

Advanced Features

The google_maps_flutter plugin offers many advanced features. Here are a few you might find useful:

Adding Markers

Markers can be added to highlight specific locations on your map:

Set<Marker> _markers = {};

// Inside your build method:
  markers: _markers,
  // ... other properties

// To add a marker:
setState(() {
      markerId: MarkerId('marker_1'),
      position: LatLng(45.521563, -122.677433),
      infoWindow: InfoWindow(title: 'Portland'),

Changing Map Type

You can switch between different map types:

  mapType: MapType.satellite,
  // ... other properties

Available map types include normal, satellite, terrain, and hybrid.

Controlling the Camera

You can programmatically move the camera:

void _goToNewYork() {
      target: LatLng(40.7128, -74.0060),
      zoom: 12,

For more advanced features and detailed usage, check out our guide on /advanced-google-maps-features-in-flutter.


Integrating Google Maps into your Flutter application opens up a world of possibilities for location-based services. Whether you’re building a delivery app, a travel guide, or any application that benefits from map integration, the google_maps_flutter plugin provides a robust solution.

Remember to handle permissions appropriately, especially when dealing with user location. For more information on handling location permissions in Flutter, see our guide on /managing-location-permissions-in-flutter.

By following this guide, you should now have a solid foundation for working with Google Maps in your Flutter projects. Happy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *