Overview #

Geographic maps for Flutter applications. Licensed under the Apache License 2.0.

This package is:

• Cross-platform
  • Android and iOS
  • Browsers
• Multi-vendor
  • Apple
  • Bing
  • Google

This is an early-stage version and lots of things are still missing or broken. Pull requests are welcome!

Links #

• Github project
• Issue tracker
• Pub package
• API reference

Getting started #

1.Add dependency #

dependencies:
  maps: ^0.2.0

2.Use #

MapAppLauncher #

MapAppLauncher launches either:

• A map website (such as Google Maps website)
• A map application in the device (such as Google Maps for Android/iOS)

import 'package:maps/maps.dart';

Future<void> main() async {
  // Use default app
  await MapAppLauncher.defaultInstance.launch(query:'Eiffel Tower');

  // Use Google Maps
  await MapAppLauncher.googleMaps.launch(
    query:'Louvre Museum',
  );
}

MapWidget #

MapWidget shows a map:

import 'package:flutter/material.dart';
import 'package:maps/maps.dart';

void main() {
  runApp(const MaterialApp(
    home: Scaffold(
      body: MapWidget(
        size: Size(300, 500),
        camera: MapCamera(
          query: 'Paris',
        ),
        markers: [
          MapMarker(
            query: 'Eiffel Tower',
          ),
        ],
        // Bing Maps iframe API does not necessarily require API credentials
        // so we use it in the example.
        adapter: MapAdapter.platformSpecific(
          android: GoogleMapsNativeAdapter(),
          browser: BingMapsIframeAdapter(),
          ios: AppleNativeAdapter(),
        ),
      ),
    ),
  ));
}

Assuming that you have enabled Flutter for Web, you can run:

flutter run -d chrome

Recommended configuration file changes #

iOS #

In ios/Runner/Info.plist:

	<key>io.flutter.embedded_views_preview</key>
	<true/>
	<key>Privacy - Location When In Use Usage Description</key>
	<string>A description of your privacy policy.</string>

Supported map providers #

Apple Maps APIs #

iOS #

• AppleMapsNativeAdapter enables you to use Apple MapKit. The current implementation depends on the Flutter package apple_maps_flutter, a package by a third-party developer.
• The adapter doesn't require API credentials.
• You need to edit ios/Runner/Info.plist (see "recommended configuration file changes").

Javascript #

• AppleMapsJsAdapter enables you to uses Apple MapKit JS.
• The adapter requires you to have API credentials (ECDSA P-256 key pair).

Images #

• AppleMapsStaticAdapter enables you to use Apple Maps Web Snapshots API.
• The adapter requires you to have API credentials (ECDSA P-256 key pair).

Bing Maps APIs #

Javascript #

• BingMapsJsAdapter enables you to use Bing Maps Javascript API.
• The adapter requires an API key, which you can get at Bing Maps API website.

Iframes #

• BingMapsIframeAdapter enables you to uses Bing Maps Custom Map URLs.
• Note that markers and many other features are unsupported by Bing Maps Custom Map URLs.
• The adapter does NOT necessarily require an API key.

Images #

• BingMapsStaticAdapter enables you to uses Bing Maps REST API for static maps.
• The adapter requires an API key, which you can get at Bing Maps API website.

Google Maps APIs #

Android / iOS #

• GoogleMapsNativeAdapter enables you to use Google Map Android / iOS SDKs.
• You need to obtain API keys and follow documentation by google_maps_flutter.

Javascript #

• GoogleMapsJsAdapter enables you to use Google Maps Javascript API.
• The adapter requires an API key, which you can get at Google Maps API website.

Iframes #

• GoogleMapsIframeAdapter enables you to use Google Maps Embed API.
• Note that markers and many other features are unsupported by Google Maps Embed API.
• The adapter requires an API key, which you can get at Google Maps API website.

Images #

• GoogleMapsStaticAdapter enables you to use Google Maps Static API.
• The adapter requires an API key, which you can get at Google Maps API website.

Tips #

Use images when you can #

Static images are rendered identically in all platforms and have the best performance.