cirrus_map_view 0.0.20

  • Example
  • Installing
  • Versions
  • 84

IMPORTANT: This plugin has been forked in order to fix minor bugs and upgrade dependencies #

map_view #

A flutter plugin for displaying google maps on iOS and Android

Please note: API changes are likely as we continue to develop this plugin.

Getting Started #

Generate your API Key #

  1. Go to:
  2. Enable Maps SDK for Android
  3. Enable Maps SDK for iOS
  4. Under Credentials, choose Create Credential.
    • Note: For development, you can create an unrestricted API key that can be used on both iOS & Android. For production it is highly recommended that you restrict.

The way you register your API key on iOS vs Android is different. Make sure to read the next sections carefully.

iOS #

The maps plugin will request your users location when needed. iOS requires that you explain this usage in the Info.plist file #

  1. Set the NSLocationWhenInUseUsageDescription in ios/Runner/Info.plist. Example:
    <string>Using location to display on a map</string>
  1. Prior to using the Map plugin, you must call MapView.setApiKey(String apiKey). Example:
   import 'package:map_view/map_view.dart';
   void main() {
     runApp(new MyApp());

Note: If your iOS and Android API key are different, be sure to use your iOS API key here.

  1. Add code to show the MapView.
    //Create an instance variable for the mapView
    var _mapView = new MapView();
//Add a method to call to show the map.
void showMap() { MapOptions(showUserLocation: true));


  1. Run your application on an iOS device or simulator. Confirm that when you display the map you see map detail. If you only see a beige screen it's possible that your API key is incorrect. When your API key is incorrect you'll see messages like this in the console:
  ClientParametersRequest failed, 7 attempts remaining (0 vs 12). Error Code=400 "(null)" UserInfo={data=<>}

Common API Key problems for iOS #

  1. Your Bundle ID does not match what is registered in the Google API Console. When you create an restricted API key in the Google API console it asks you to specify your iOS bundle ID. Make sure that your iOS Bundle Identifier matches the one you registered in the console.

  2. Using the wrong key. If you made a separate key for iOS and Android, make sure you are using the iOS key in the MapView.setApiKey() call.

Android #

You will be making multiple edits to your AndroidManifest.xml file. In your Flutter project, you can find this file location under android/app/src/main

  1. In your AndroidManifest.xml, add the following uses-permission above the

         <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
         <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
  2. In your AndroidManifest.xml, add the following lines inside of the application tag. Be sure to replace your_api_key with the one you generated.

         <meta-data android:name="" android:value="your_api_key"/>
         <meta-data android:name="" android:value="@integer/google_play_services_version"/>
  3. Add the MapActivity to your AndroidManifest.xml

         <activity android:name="com.apptreesoftware.mapview.MapActivity" android:theme="@style/Theme.AppCompat.Light.DarkActionBar"/>
  4. In your android/build.gradle file. Under buildScript dependencies add:

         classpath 'org.jetbrains.kotlin:kotlin-gradle-plugin:1.1.2-4'
  5. Run your application on an Android device or simulator. Confirm that when you display the map you see map detail. If you only see a beige screen it's possible that your API key is incorrect.

Static Maps for Inline display #

This plugin does not currently support displaying a Google Map within the Flutter widget hierarchy. A common workaround for this is to show a static image using the Google Static Maps API. Included in this Plugin is the StaticMapProvider class which will allow you to easily generate a static map. The Static Maps API also requires an API Key and you must enable the API within the Google API Console.

  1. Go to:
  2. Enable Maps Static API
  3. Once enabled, you can use the same API key you generated for iOS/Android.
  4. Initialize the StaticMapProvider
     var provider = new StaticMapProvider('your_api_key');
  5. The StaticMapProvider offers a few different APIs for generating static maps. If you want to generate an image for the current viewport of your full screen interactive map you can use:
var uri = staticMapProvider.getImageUriFromMap(mapView,
                  width: 900, height: 400);

You can refer to the example project if you run into any issues with these steps.

Features #

  • [X] iOS Support
  • [X] Android Support
  • [X] Toolbar support
  • [X] Update Camera position
  • [X] Add Map pins
  • [X] Receive map pin touch callbacks
  • [X] Receive map touch callbacks
  • [X] Receive location change callbacks
  • [X] Receive camera change callbacks
  • [X] Zoom to a set of annotations
  • [X] Customize Pin color
  • [X] Polyline support
  • [X] Polygon support
  • [X] Customize pin image
  • [X] Remove markers, polylines & polygons.

Upcoming #

  • [ ] Bounds geometry functions

Usage examples #

Show a map ( with a toolbar ) #
        new MapOptions(
            mapViewType: MapViewType.normal,
            showUserLocation: true,
            initialCameraPosition: new CameraPosition(
                new Location(45.5235258, -122.6732493), 14.0),
            title: "Recently Visited"),
        toolbarActions: [new ToolbarAction("Close", 1)]);

Get notified when the map is ready #

mapView.onMapReady.listen((_) {
  print("Map ready");

Add multiple pins to the map #

    new Marker("1", "Work", 45.523970, -122.663081, color:,
    new Marker("2", "Nossa Familia Coffee", 45.528788, -122.684633),

Add a single pin to the map #

mapView.addMarker(new Marker("3", "10 Barrel", 45.5259467, -122.687747,
        color: Colors.purple));

Edit custom Marker image #

First add your assets to a folder in your project directory. The name of the folder could be any but "images" or "assets" are the more common. It should look like this.

- project_name
    # Rest of project folders and files

Then add asset to the pubspec.yaml under flutter tag.

    # Code already existent

    # Added asset.
        - images/flower_vase.png

Finally use the asset name as icon for your marker. If the width or height is not set or is equals to 0, the image original value of said attribute will be used.

new Marker(
      "Something fragile!",
      draggable: true, //Allows the user to move the marker.
      markerIcon: new MarkerIcon(
        "images/flower_vase.png", //Asset to be used as icon
        width: 112.0, //New width for the asset
        height: 75.0, // New height for the asset

Set a Marker draggable and listening to position changes #

First set the draggable attribute of a marker to true.

Marker marker=new Marker(
      "Something fragile!",
      draggable: true, //Allows the user to move the marker.

Now add listeners for the events.

// This listener fires when the marker is long pressed and could be moved.
mapView.onAnnotationDragStart.listen((markerMap) {
      var marker = markerMap.keys.first;
      var location = markerMap[marker]; // The original location of the marker before moving it. Use it if needed.
      print("Annotation ${} dragging started");
// This listener fires when the user releases the marker.
mapView.onAnnotationDragEnd.listen((markerMap) {
      var marker = markerMap.keys.first;
      var location = markerMap[marker]; // The actual position of the marker after finishing the dragging.
      print("Annotation ${} dragging ended");
// This listener fires every time the marker changes position.
mapView.onAnnotationDrag.listen((markerMap) {
      var marker = markerMap.keys.first;
      var location = markerMap[marker]; // The updated position of the marker.
      print("Annotation ${} moved to ${location.latitude} , ${location

Add a single polyline to the map #

mapView.addPolyline(new Polyline(
            new Location(45.519698, -122.674932),
            new Location(45.516687, -122.667014),
          width: 15.0));

Add multiple polylines to the map #

        new Polyline(
            new Location(45.523970, -122.663081),
            new Location(45.528788, -122.684633),
            new Location(45.528864, -122.667195),
          jointType: FigureJointType.round,
          width: 15.0,
          color: Colors.orangeAccent,
        new Polyline(
            new Location(45.519698, -122.674932),
            new Location(45.516687, -122.667014),
          width: 15.0,

Add a single polygon to the map #

mapView.addPolygon(new Polygon(
                                   new Location(45.5231233, -122.6733130),
                                   new Location(45.5233225, -122.6732969),
                                   new Location(45.5232398, -122.6733506),
                                   new Location(45.5231233, -122.6733130),
                                 jointType: FigureJointType.round,
                                 strokeWidth: 5.0,
                                 fillColor: Color.fromARGB(75, 255, 0, 0),

Add multiple polygons to the map #

        new Polygon(
              new Location(42.9274334, -72.2811234),
              new Location(42.9258230, -72.2808444),
              new Location(42.9261294, -72.2779906),
              new Location(42.9275120, -72.2779155),
            //you can add a hole inside the polygon
            holes: <Hole>[
              new Hole(
                  new Location(42.9270721, -72.2797287),
                  new Location(42.9266400, -72.2796750),
                  new Location(42.9267186, -72.2790956),
                  new Location(42.9270014, -72.2790956),
            jointType: FigureJointType.round,
            strokeWidth: 5.0,
            fillColor: Color.fromARGB(75, 255, 0, 0)),
        new Polygon(
              new Location(45.5231233, -122.6733130),
              new Location(45.5233225, -122.6732969),
              new Location(45.5232398, -122.6733506),
              new Location(45.5231233, -122.6733130),
            jointType: FigureJointType.round,
            strokeWidth: 5.0,
            fillColor: Color.fromARGB(75, 255, 0, 0)),

Remove elements from the map #

//Remove all markers

Zoom to fit all the pins on the map #

mapView.zoomToFit(padding: 100);

Receive location updates of the users current location #

     .listen((location) => print("Location updated $location"));

Receive marker, polyline & polygon touches

mapView.onTouchAnnotation.listen((annotation) => print("annotation ${} tapped"));
mapView.onTouchPolyline.listen((polyline) => print("polyline ${} tapped"));
mapView.onTouchPolygon.listen((polygon) => print("polygon ${} tapped"));

Receive map touches #

     .listen((location) => print("Touched location $location"));
     .listen((location) => print("Long tapped location $location"));

Receive indoor building & indoor level

        (indoorBuilding) => print("Activated indoor building $indoorBuilding"));
    (indoorLevel) => print("Activated indoor level $indoorLevel"));

Receive camera change updates #

mapView.onCameraChanged.listen((cameraPosition) =>
     this.setState(() => this.cameraPosition = cameraPosition));

Receive toolbar actions #

mapView.onToolbarAction.listen((id) {
  if (id == 1) {

Get the current zoom level #

double zoomLevel = await mapView.zoomLevel;

Get the maps center location #

Location centerLocation = await mapView.centerLocation;

Get the visible markers on screen #

List<Marker> visibleAnnotations = await mapView.visibleAnnotations;

[0.0.20] - 02-19-2019

  • Modifying for avoid use of AndroidX

[0.0.19] - 01-07-2018

  • Updating map library to ''

[0.0.18] - 11-07-2018

  • Fixing support for !use_imports and Swift (improve interoperability with other plugins)

[0.0.15] - 11-07-2018

  • Fixing Android compile issue Only safe (?.) or non-null asserted (!!.)

[0.0.14] - 7-18-2018

  • Fixing Android compile issue

[0.0.13] - 7-18-2018

  • Added polyline support. Major thanks to @LJaraCastillo
  • Dart2 updates

[0.0.12] - 4-17-2018

  • Update gradle dependencies

[0.0.11] - 04-15-2018

  • Fixed iOS getting current location. Thanks to @nunorpg
  • Added MIT License
  • Added satellite support for static maps thanks to @grepLines

[0.0.10] - 12-30-2017

  • Fixed bug where adding annotations would fail after displaying map a second time.

[0.0.8] - 12-29-2017

  • Another attempt at fixing dependency problems

[0.0.7] - 12-29-2017

  • Fixed dependency problem with uri package.

[0.0.9] - 12-30-2017

  • Added isEqual check for Marker
  • Add removeMarker

[0.0.6] - 12-27-2017

  • Improved README for easier project integration
  • Added StaticMapProvider for generating static map images for inline display
    • Supports generating an image for center and zoom level
    • Supports generating an image given a list of markers
    • Supports generating an image given a current active MapView ( will copy visible annotations, center and zoom to generate static image)
  • MapView now exports all public classes so you only have to import package:map_view/map_view.dart
  • Added support for info window tap events thanks to HelenGuov
  • Added support for changing map type (normal, satellite, terrain) thanks to HelenGuov

[0.0.5] - 11-14-2017

  • Improved setup documentation

[0.0.4] - 11-08-2017

  • Updated Authors for

[0.0.3] - 11-08-2017

[0.0.2] - 11-07-2017

  • Improved examples

[0.0.1] - 11-07-2017

  • Full Screen Map Support
  • iOS Support
  • Android Support
  • Support for adding map pins
  • Support for location change updates
  • Support for camera position updates
  • Support for marker touch callbacks
  • Support for map tap callbacks
  • Support for zooming to annotation(s)
  • Support for setting camera position
  • Support for querying current viewport information
  • Support for getting current visible pins
  • Support for toolbar items


map_view_example #

Demonstrates how to use the map_view plugin.

Getting Started #

For help getting started with Flutter, view our online documentation.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  cirrus_map_view: ^0.0.20

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:cirrus_map_view/camera_position.dart';
import 'package:cirrus_map_view/cluster.dart';
import 'package:cirrus_map_view/figure_joint_type.dart';
import 'package:cirrus_map_view/indoor_building.dart';
import 'package:cirrus_map_view/location.dart';
import 'package:cirrus_map_view/locations.dart';
import 'package:cirrus_map_view/map_options.dart';
import 'package:cirrus_map_view/map_view.dart';
import 'package:cirrus_map_view/map_view_type.dart';
import 'package:cirrus_map_view/marker.dart';
import 'package:cirrus_map_view/polygon.dart';
import 'package:cirrus_map_view/polyline.dart';
import 'package:cirrus_map_view/static_map_provider.dart';
import 'package:cirrus_map_view/toolbar_action.dart';
Version Uploaded Documentation Archive
0.0.20 Feb 19, 2019 Go to the documentation of cirrus_map_view 0.0.20 Download cirrus_map_view 0.0.20 archive
0.0.19 Feb 5, 2019 Go to the documentation of cirrus_map_view 0.0.19 Download cirrus_map_view 0.0.19 archive
0.0.18 Jan 23, 2019 Go to the documentation of cirrus_map_view 0.0.18 Download cirrus_map_view 0.0.18 archive
0.0.17 Dec 19, 2018 Go to the documentation of cirrus_map_view 0.0.17 Download cirrus_map_view 0.0.17 archive
0.0.16 Nov 9, 2018 Go to the documentation of cirrus_map_view 0.0.16 Download cirrus_map_view 0.0.16 archive
0.0.15 Nov 7, 2018 Go to the documentation of cirrus_map_view 0.0.15 Download cirrus_map_view 0.0.15 archive
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Jun 17, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.3.2
  • pana: 0.12.18
  • Flutter: 1.5.4-hotfix.2


Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health suggestions

Format lib/map_options.dart.

Run flutter format to format lib/map_options.dart.

Format lib/map_view.dart.

Run flutter format to format lib/map_view.dart.

Format lib/map_view_type.dart.

Run flutter format to format lib/map_view_type.dart.

Format lib/polygon.dart.

Run flutter format to format lib/polygon.dart.

Format lib/polyline.dart.

Run flutter format to format lib/polyline.dart.

Maintenance issues and suggestions

Support latest dependencies. (-5 points)

The version constraint in pubspec.yaml does not support the latest published versions for 1 dependency.

Package is pre-v0.1 release. (-10 points)

While nothing is inherently wrong with versions of 0.0.*, it might mean that the author is still experimenting with the general direction of the API.

The package description is too short. (-1 points)

Add more detail to the description field of pubspec.yaml. Use 60 to 180 characters to describe the package, what it does, and its target use case.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.28.0 <3.0.0
flutter 0.0.0
uri ^0.11.1 0.11.3+1
Transitive dependencies
collection 1.14.11
matcher 0.12.5
meta 1.1.6 1.1.7
path 1.6.2
quiver 2.0.3
sky_engine 0.0.99
stack_trace 1.9.3
typed_data 1.1.6
utf 0.9.0+5
vector_math 2.0.8