Skip to content

Launching Maps in Flutter: A Comprehensive Guide to the Map Launcher Plugin

  • by

In the world of mobile app development, integrating maps and location-based services is often crucial. While Flutter provides the google_maps_flutter plugin for embedding maps directly in your app, sometimes you need to launch external map applications. This is where the map_launcher plugin comes in handy. In this post, we’ll explore how to use this versatile plugin to launch various map applications from your Flutter app.

Introduction to Map Launcher

The map_launcher plugin is a powerful tool that allows Flutter developers to find available map applications installed on a device and launch them with specific coordinates, markers, or directions. It supports a wide range of map applications, including Google Maps, Apple Maps, Waze, and many others.

To get started, add map_launcher to your pubspec.yaml file:

dependencies:
  map_launcher: ^3.3.1
  flutter_svg: ^2.0.5  # Required for map icons

Setting Up Map Launcher

iOS Configuration

For iOS, you need to add URL schemes to your Info.plist file. This allows your app to open other map applications:

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>comgooglemaps</string>
    <string>baidumap</string>
    <string>iosamap</string>
    <string>waze</string>
    <!-- Add other map URL schemes as needed -->
</array>

For a complete list of supported URL schemes, check out our guide on /ios-url-schemes-for-map-applications.

Android Configuration

No additional configuration is required for Android.

Using Map Launcher in Your Flutter App

Now that we’ve set up the plugin, let’s explore how to use it in your Flutter application.

1. Checking Available Maps

First, you’ll want to get a list of installed map applications:

import 'package:map_launcher/map_launcher.dart';

Future<void> checkAvailableMaps() async {
  final availableMaps = await MapLauncher.installedMaps;
  print(availableMaps);
}

This will return a list of AvailableMap objects, each representing an installed map application.

2. Launching a Map with a Marker

To launch a map and show a marker at a specific location:

Future<void> launchMapWithMarker() async {
  final availableMaps = await MapLauncher.installedMaps;
  if (availableMaps.isNotEmpty) {
    await availableMaps.first.showMarker(
      coords: Coords(37.759392, -122.5107336),
      title: "Ocean Beach",
    );
  }
}

This code launches the first available map application and shows a marker at Ocean Beach in San Francisco.

3. Showing Directions

To launch a map with directions:

Future<void> showDirections() async {
  final origin = Coords(37.3230, -122.0322);
  final destination = Coords(37.7749, -122.4194);

  await MapLauncher.showDirections(
    mapType: MapType.google,
    origin: origin,
    destination: destination,
    originTitle: "Apple Park",
    destinationTitle: "San Francisco",
  );
}

This example shows directions from Apple Park to San Francisco using Google Maps.

4. Creating a Map Selection Bottom Sheet

A common use case is to let users choose which map application they want to use. Here’s how you can create a bottom sheet for map selection:

Future<void> showMapSelectionSheet(BuildContext context) async {
  final availableMaps = await MapLauncher.installedMaps;
  final coords = Coords(37.759392, -122.5107336);
  final title = "Ocean Beach";

  showModalBottomSheet(
    context: context,
    builder: (BuildContext context) {
      return SafeArea(
        child: SingleChildScrollView(
          child: Wrap(
            children: <Widget>[
              for (var map in availableMaps)
                ListTile(
                  onTap: () => map.showMarker(
                    coords: coords,
                    title: title,
                  ),
                  title: Text(map.mapName),
                  leading: SvgPicture.asset(
                    map.icon,
                    height: 30.0,
                    width: 30.0,
                  ),
                ),
            ],
          ),
        ),
      );
    },
  );
}

This creates a bottom sheet that lists all available map applications, allowing the user to choose which one to launch.

Advanced Features

Custom Parameters

Some map applications support additional parameters. You can pass these using the extraParams option:

await MapLauncher.showMarker(
  mapType: MapType.google,
  coords: Coords(37.759392, -122.5107336),
  title: "Ocean Beach",
  extraParams: {
    'zoom': '14',
    'layer': 'traffic'
  },
);

For a detailed list of supported parameters for each map type, check out our guide on /custom-parameters-for-map-applications.

Handling Multiple Waypoints

For routes with multiple stops, you can use waypoints:

final waypoints = [
  Waypoint(latitude: 37.3230, longitude: -122.0322, name: "Apple Park"),
  Waypoint(latitude: 37.4220, longitude: -122.0841, name: "Palo Alto"),
];

await MapLauncher.showDirections(
  mapType: MapType.google,
  destination: Coords(37.7749, -122.4194),
  waypoints: waypoints,
  destinationTitle: "San Francisco",
);

Note that not all map applications support waypoints. For more information on waypoint support, see our article on /waypoint-support-in-different-map-applications.

Conclusion

The map_launcher plugin provides a flexible and powerful way to integrate external map applications into your Flutter app. Whether you need to show a simple marker, provide directions, or offer users a choice of map applications, this plugin has you covered.

Remember to handle cases where no map applications are installed, and always test on both iOS and Android devices to ensure compatibility across platforms.

For more advanced usage and tips on optimizing map launches in your app, check out our guide on /optimizing-map-launches-in-flutter-apps.

Happy mapping!

Leave a Reply

Your email address will not be published. Required fields are marked *