Google Maps in Flutter, How to Load Google Maps

Last updated Oct 21, 2020

Nowadays Google Maps is the most important part of everyone's life.
Every technology wants to add GoogleMaps in the application.


Flutter provided a plugin to load google maps.
Plugin google_maps_flutter  

Integrate this plugin in the Flutter application.

Create Application:
First, create a Flutter application in Any IDE, I am using Android Studio.
By creating a new Flutter Application menu in the File options.


Add Plugin to application
First, we need to add google_maps_flutter dependency in the pubspec.yaml file under the dependency line. It should be like below. Replace the version with the latest available version.


    sdk: flutter
  google_maps_flutter: ^0.5.21+11


To use Google Maps we need to get a Google API key.
For this, we need to create an application in Google Console and get an API key.
Google Console


Create a new project


GoTo Conolse and select application and go to API & Services and create credentials and copy the API key.


Enable GoogleMaps SDK API

Now come to the Flutter application and Paste your key in the Manifest file inside the meta tag.




Create Googlemaps widget

Now create a Widget and add below code

import 'dart:async';

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

class MyMaps extends StatefulWidget{
  State createState() {
    // TODO: implement createState
    return MyMapsState();

class MyMapsState extends State{
  Completer _controller = Completer();
  static final CameraPosition _kGooglePlex = CameraPosition(
    target: LatLng(17.385044, 78.486671),
    zoom: 14.4746,
  void initState() {
    // TODO: implement initState


  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(leading: Icon(,backgroundColor: Colors.grey,),
      body: Container(
        child: GoogleMap(initialCameraPosition: _kGooglePlex,

          onTap: (_){

          mapType: MapType.normal,
          onMapCreated: (GoogleMapController controler){





Now run the flutter application. Now you can see Google Maps on your Screen


Show Multiple Markers on Maps Flutter


Article Contributed By :


Subscribe For Daily Updates

Flutter Questions
Android Questions