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:

Usage

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

dependencies:
  ...
  google_maps_flutter: ^2.0.6

Create API Key

• Get an API key at https://cloud.google.com/maps-platform/.
• 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="com.google.android.geo.API_KEY"
               android:value="YOUR KEY"/>

Setup For The IOS

• Add your API key in theAppDelegate.swift

import UIKit
import Flutter
import GoogleMaps

@UIApplicationMain
@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)
  }
}

Both

• 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() {
  runApp(MyApp());
}

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

class MapSamplePage extends StatefulWidget {

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

  @override
  _MapSamplePageState createState() => _MapSamplePageState();
}

class _MapSamplePageState extends State<MapSamplePage> {

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

  @override
  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;
    });
  }

}