How to integrate Flutter applications with Google Maps

[shivankawasthi]

Authored by:

• Utkarsh Bhardwaj (@bhardwaju) Cloud Migration Consultant, Google
• Shivank Awasthi (@shivankawasthi) Strategic Cloud Engineer, Google

Video by:

• Amit Dutta, Strategic Cloud Engineer, Google

---

In this article, we'll discuss how to integrate Flutter applications with Google Maps. We'll use the Google Maps plugin to add a map to our Flutter application.

If you have any questions, please leave a comment below! 

To get started, we need to create a new Flutter project. This can be done by running the following command: 

flutter create my_app

This command will create a new Flutter project called my_app

Next, we need to add the Google Maps plugin to our project. This plugin will allow us to add a map to our Flutter application.

To add the Google Maps plugin, we need to open the pubspec.yaml file in the root directory of our Flutter project. This file will contain the information about our project, such as its name, version, and dependencies.

The following is an example of a pubspec.yaml file:

name: my_app
version: 1.0.0
description: A Flutter application for doing cool things.

dependencies:
    flutter: 2.0.0
    google_services: 1.0.0

Once we've added the Google Maps plugin to our project, we need to run the flutter packages get command to install the plugin. This command will download and install the plugin from the Dart Pub repository.

Now, we're ready to add a map to our Flutter application. We can do this by adding the following code to the main.dart file: 

import 'package:google_maps/google_maps.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
        ),
        body: Center(
          child: GoogleMap(
            initialCameraPosition: CameraPosition(
              latitude: 37.4419,
              longitude: -122.1419,
              zoom: 15,
            ),
            onCameraMove: (position) {
              // Do something when the camera moves.
            },
          ),
        ),
      ),
    );
  }
}

This code will add a map to our Flutter application. The Google Map widget will take care of all the details, such as loading the map and handling user interactions.

That's it! We have successfully integrated the Flutter application with Google Maps.