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

Myroslava Drobnych

3 min readMay 5, 2022

Getting an API key: https://developers.google.com/maps/documentation/javascript/get-api-key#creating-api-keys
Open https://flutlab.io 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.

WEB

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.

google_maps_flutter | Flutter Package

A Flutter plugin that provides a Google Maps widget. Android iOS Support SDK 20+ iOS 9+ To use this plugin, add…

pub.dev

google_maps_flutter_web | Flutter Package

Web platform implementation of google_maps_flutter

pub.dev

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

Android

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);
  
  @override
  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);  @override
  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;
    });
  }  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Google Map Sample'),
        backgroundColor: Colors.blue,
      ),
      body: Stack(
        children: [
          GoogleMap(
            mapType: _currentMapType,
            initialCameraPosition: _london,
            onMapCreated: (GoogleMapController controller) {
              _controller.complete(controller);
            },
          ),
          Padding(
            padding: const EdgeInsets.all(18),
            child: Align(
              alignment: Alignment.topRight,
              child: FloatingActionButton(
                onPressed: _onMapType,
                child: const Icon(Icons.map, size: 36),
              ),
            ),
          ),
        ],
      ),
    );
  }
}