Guide to integrate Google Maps with Flutter

Learn how to build a mobile app featuring a Google Map using the Flutter SDK.

Introduction

What you’ll build?

What is Flutter?

What you’ll learn?

Github Repository | @ShivamGoyal1899

Package Used | google_maps_flutter

Setting up Flutter on your machine

Getting started

Getting started with Flutter

$ flutter create google_maps_in_flutter
Creating project google_maps_in_flutter...
[Listing of created files elided]
Running "flutter packages get" in google_maps_in_flutter... 6.1s
Wrote 66 files.

All done!
[✓] Flutter (Channel dev, v1.5.0, on Mac OS X 10.14.3 18D109, locale en-IN)
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 10.2)
[✓] Android Studio is fully installed. (version 3.1)
[✓] IntelliJ IDEA Community Edition (version 2018.3.5)
[✓] VS Code (version 1.33.1)
[✓] Connected device is fully installed. (1 available)

In order to run your application, type:

$ cd google_maps_in_flutter
$ flutter run

Your application code is in google_maps_in_flutter/lib/main.dart.

Adding Google Maps Flutter plugin as a dependency

$ flutter packages get
Running "flutter packages get" in google_maps_in_flutter... 0.9s

Adding Google Maps to the app

It’s all about the API keys

Adding an API key for an Android app

Adding an API key for an iOS app

Putting a map on the screen

Running the app

$ flutter run

Upgrading to Google Maps SDK for iOS 3.0

Using the latest version of Maps for iOS

Set a declared platform for CocoaPods

Update the CocoaPod dependency

$ (cd ios && pod update)
Analyzing dependencies
Fetching podspec for `Flutter` from `.symlinks/flutter/ios`
Fetching podspec for `google_maps_flutter` from `.symlinks/plugins/google_maps_flutter/ios`
Downloading dependencies
Using Flutter (1.0.0)
Installing GoogleMaps 3.0.3
Using google_maps_flutter (0.0.1)
Generating Pods project
Integrating client project
Pod installation complete! There are 2 dependencies from the Podfile and 3 total pods installed.

Set the deployment target in Xcode

$ open ios/Runner.xcworkspace/

Running the app, again

$ flutter run
Launching lib/main.dart on iPhone XR in debug mode...
Running pod install... 1.2s
Running Xcode build...
├─Assembling Flutter resources... 1.3s
└─Compiling, linking and signing... 4.5s
Xcode build done. 7.6s
Google Maps SDK for iOS version: 3.0.33124.0
Syncing files to device iPhone XR... 1,267ms

🔥 To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".

Put Google on the Map

$ flutter packages get 
Running "flutter packages get" in google_maps_in_flutter... 0.5s

Using the providing tooling

$ flutter format .
Formatting directory .:
Formatted lib\main.dart
Unchanged test\widget_test.dart
$ flutter analyze
Analyzing google_maps_in_flutter...
No issues found! (ran in 1.8s)

Parsing JSON with code generation

$ flutter packages pub run build_runner build
[INFO] Generating build script...
[INFO] Generating build script completed, took 291ms

[INFO] Initializing inputs
[INFO] Reading cached asset graph...
[INFO] Reading cached asset graph completed, took 65ms

[INFO] Checking for updates since last build...
[INFO] Checking for updates since last build completed, took 595ms

[INFO] Running build...
[INFO] 1.2s elapsed, 0/1 actions completed.
[INFO] Running build completed, took 1.2s

[INFO] Caching finalized dependency graph...
[INFO] Caching finalized dependency graph completed, took 27ms

[INFO] Succeeded after 1.2s with 1 outputs (1 actions)

Congratulations!

🎯 That’s all for today.

If you got any queries hit me up in the comments or ping me over on hi@itsshivam.com 📧

If you learned even a thing or two, clap your hands👏 as many times as you can to show your support! It really motivates me to contribute towards the community.

Feeling too generous? Buy me a Drink 🍺

Wanna collaborate? Let’s talk some tech 😊

Stalk me over on itsshivam.com, GitHub, or LinkedIn. 👀

💻 Application Engineer Intern at Google

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store