How to add Google Maps in a flutter app in one click

Myroslava Drobnych
3 min readMay 5, 2022
  1. Getting an API key:
  2. Open and create a new project from Codebase

3. Open the new project and remove all the code from the main.dart file.

4. Click on the “Google Services” button and select Connect to Google Maps.


In the opened window select Web

Copy-paste your Google Maps API key into the field and press “Continue” button.

As a result, FlutLab has added two packages to pubspec.yaml file.

FlutLab has also added API key to your /web/index.html file.


In the opened window select Android.

Copy-paste your Google Maps API key into the field and press “Continue” button.

FlutLab has added package to pubspec.yaml file and API key to your /android/app/src/main/AndroidManifest.xml file.

5. Copy-paste this code to your main.dart file and press Ctrl+S

import 'dart:async';import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
void main() => runApp(const MyApp());class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);

Widget build(BuildContext context) {
return const MaterialApp(
title: 'Flutter Google Maps Demo',
home: MapSample(),
class MapSample extends StatefulWidget {
const MapSample({Key? key}) : super(key: key);
State<MapSample> createState() => MapSampleState();
class MapSampleState extends State<MapSample> {
final Completer<GoogleMapController> _controller = Completer();
static const CameraPosition _london = CameraPosition(
target: LatLng(51.5071943, -0.102977),
zoom: 15,
MapType _currentMapType = MapType.normal;
void _onMapType() {
setState(() {
_currentMapType = _currentMapType == MapType.normal ? MapType.satellite : MapType.normal;
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Google Map Sample'),
body: Stack(
children: [
mapType: _currentMapType,
initialCameraPosition: _london,
onMapCreated: (GoogleMapController controller) {
padding: const EdgeInsets.all(18),
child: Align(
alignment: Alignment.topRight,
child: FloatingActionButton(
onPressed: _onMapType,
child: const Icon(, size: 36),

6. Click “Build Project” button with “web” target.

7. Great! You can see Google Maps in the FlutLab web emulator.

8. Click the “Build Project” button with “android-x86” target.

9. Download *.apk file

10. Upload it to or your Android device and check the app.

BTW, you can run this example from FlutLab Sandbox