How to Add Google Map in Flutter App

In this example, we are going to show you the easiest way to insert Google Map in Flutter App. This is the detailed explanation from getting Google Map SDK Api Key to implementation markers, enabling zoom in Flutter App. Follow the steps below:

First, go to Google Cloud Console to enable Map SDK and get API Key. Create the New Project and Go to Google Maps Platform:

Go to the Google console > Google Maps Platform and get the API key for your google map. After getting the google Maps API KEY, enable the SDK for Android and iOS from the "APIs" Section.

In the API section, enable "Maps SDK for Android" and "Maps SDK for iOS".

Go to the Credentials section and copy the generated Key.

<application
   android:label="testapp"
   android:icon="@mipmap/ic_launcher">

   <meta-data android:name="com.google.android.geo.API_KEY"  
             android:value="YOUR MAP API KEY"/>
  
 <activity  
     android:name=".MainActivity"

Replace API Key in the Code above:

In iOS, Add your code like below in 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 {
    GMSServices.provideAPIKey("YOUR KEY HERE")
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

In Flutter part, add google_maps_flutter Flutter Package in your dependency by adding the following line in pubspect.yaml file:

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.0.4

See the full Flutter example to insert Google Map in your App.

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(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {

  GoogleMapController? mapController; //contrller for Google map
  Set<Marker> markers = Set(); //markers for google map
  LatLng showLocation = LatLng(27.7089427, 85.3086209);  
                            //location to show in map

  @override
  void initState() {
      markers.add(Marker( //add marker on google map
          markerId: MarkerId(showLocation.toString()),
          position: showLocation, //position of marker
          infoWindow: InfoWindow( //popup info 
            title: 'My Custom Title ',
            snippet: 'My Custom Subtitle',
          ),
          icon: BitmapDescriptor.defaultMarker, //Icon for Marker
      ));

      //you can add more markers here
    super.initState();
  }
  
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
          appBar: AppBar( 
             title: Text("Google Map in Flutter"),
             backgroundColor: Colors.deepPurpleAccent,
          ),
          body: GoogleMap( //Map widget from google_maps_flutter package
                    zoomGesturesEnabled: true, //enable Zoom in, out on map
                    initialCameraPosition: CameraPosition( //innital position in map
                      target: showLocation, //initial position
                      zoom: 10.0, //initial zoom level
                    ),
                    markers: markers, //markers to show on map
                    mapType: MapType.normal, //map type
                    onMapCreated: (controller) { //method called when map is created
                      setState(() {
                        mapController = controller; 
                      });
                    },
              ),
       );
  }
}

You can also add multiple markers here, see the article: How to Add Multiple Markers on Google Map in Flutter or you can see more Google map tutorials: