Adding Google Maps to Flutter

This article shows you step-by-step to add a Google Map to your Flutter application. Here’s what you’re visiting build today:


The first step is to add the Google Maps Flutter plugin as a dependency in the pubspec.yaml file

  google_maps_flutter: ^2.0.6


Create API Key

  • Get an API key at
  • Enable Google Map SDK for each platform.
    • Go to Google Developers Console.
    • Choose the project that you just want to enable Google Maps on.
    • Select the navigation menu and select “Google Maps”.
    • Select “APIs” under the Google Maps menu.
    • To enable the Google Maps for Android, select “Maps SDK for Android” within the “Additional APIs” section, then select “ENABLE”.
    • To enable the Google Maps for iOS, select “Maps SDK for iOS” within the “Additional APIs” section, then select “ENABLE”.


Setup For The Android

  • Set the Minimum SDK Version 20 or leter in android/app/build.gradle.
android {
    defaultConfig {
        minSdkVersion 20
  • Add your API key in theAndroidManifest.xml
<manifest ...
  <application ...
    <meta-data android:name=""
               android:value="YOUR KEY"/>


Setup For The IOS

  • Add your API key in theAppDelegate.swift
import UIKit
import Flutter
import GoogleMaps

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



  • You can now add a GoogleMap widget to your widget tree.


Sample Code

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

void main() {

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Map Sample Code',
      theme: ThemeData(
      home: MapSamplePage(),

class MapSamplePage extends StatefulWidget {

  MapSamplePage({Key key}) : super(key: key);

  _MapSamplePageState createState() => _MapSamplePageState();

class _MapSamplePageState extends State<MapSamplePage> {

  GoogleMapController mapController;
  final LatLng _center = const LatLng(21.20755271505395, 72.83478912562845);
  final Map<String, Marker> _markers = {};

  Widget build(BuildContext context) {
    return Scaffold(
      body: GoogleMap(
        mapToolbarEnabled: false,
        onMapCreated: _onMapCreated,
        initialCameraPosition: CameraPosition(
          target: _center,
          zoom: 12.0,
        markers: _markers.values.toSet(),

  Future<void> _onMapCreated(GoogleMapController controller) async {
    setState(() {
      //add marker
      final marker = Marker(
        markerId: MarkerId("Vision"),
        position: _center,
      _markers["Vision"] = marker;



Submit a Comment

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


Select Categories