Google Maps & URL Launcher in Flutter

A short guide on how to use Google Maps & URL Launcher in your next Flutter app.

While working on a Flutter sample app, I wanted to add Google Maps and let the user navigate from point A to point B via Google Maps itself.

In this Google Maps & URL Launcher in Flutter tutorial, I’m using Google Maps for locating two locations, drawing a polyline between them and navigating between those two locations.

Prerequisites

1. Basic knowledge of Flutter with Dart language
2. Your IDE, setup with Flutter and Dart plugins

The next step is getting an API key for both Android and iOS. For Android, follow the instructions at Maps SDK for Android — Get API Key.

Once you have your API key, add it to your Flutter app in the application manifest.

manifest.xml

For iOS, follow the instructions at Maps SDK for iOS — Get API Key.

Once you have this key, add it to your Flutter app in the application delegate,

AppDelegate.swift

Packages Used

The latest version of all packages are available at pub.dev.

1. google_maps_flutter: Add the Google Maps Flutter plugin as a dependency in the pubspec.yaml file.
2. url_launcher: This is used for opening a URL, in this case a URL in the Google Maps app on your device.

dependencies:  
 google_maps_flutter: ^0.5.21
 url_launcher: ^5.1.3

After adding any new dependencies in the project, you need to run flutter packages get.

Adding the Google Maps widget

mapWidget.dart

onMapCreated: The method that is called on the map’s creation.

initialCameraPosition: A required parameter that sets the starting camera position and zoom value (if required). Camera position describes which part of the world you want the map to point at.

Navigation between two locations

launcher.dart

canLaunch(url): Checks if the URL can be launched or not; a validity check.

launch(url): Launches the URL, either in a browser or an app that handles the URL in the device.

Conclusion

Congratulations on making it this far! 😄

Let’s put all the above parts together. Here’s the final code:

Final main.dart

Shivani Patel is a Mobile Engineer at Softway. She works on Android and Flutter, and loves building beautiful looking apps that bring along new challenges with them.

Learn more about Softway here:

Houston Digital & Creative Agency for Transformative Marketing | Softway