How to Add Google Map in Flutter | Step by Step Easy Guide

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:

Step 1: Enable Google Map SDK in Cloud Console

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

Step 2: In API Section, Go to "Maps SDK for Android" or "Maps SDK for iOS" and Enable it:

Go to "Maps SDK for Andoird" section, you will see the new screen with the "Enable" button. Click on it to enable SDK.

Step 3: Go to Credentials to get API Key:

Go to the Credentials section and copy the generated Key. 

Step 4: [Android] Add Google API Key to AndroidManifest.xml

<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:

[iOS]

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

Step 5: Add Google Map Package in Flutter Project:

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

Step 6: Add Google Map in Flutter App:

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
  final Set<Marker> markers = new Set(); //markers for google map
  static const LatLng showLocation = const LatLng(27.7089427, 85.3086209); //location to show in map
  
  @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: this.getmarkers(), //markers to show on map
                    mapType: MapType.normal, //map type
                    onMapCreated: (controller) { //method called when map is created
                      setState(() {
                        mapController = controller; 
                      });
                    },
                  ),
       );
  }

  Set<Marker> getmarkers() { //markers to place on map
    setState(() {
      markers.add(Marker( //add marker
        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
      ));
    });
    return markers;
  }
}

Output Screenshot:

In this way, you can show Google Maps in your Flutter app. 

No any Comments on this Article


Please Wait...