map_view 0.0.12

  • README.md
  • CHANGELOG.md
  • Example
  • Installing
  • Versions
  • 98

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: https://console.developers.google.com/
  2. Enable Google Maps Android API
  3. Enable Google 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.
  • More detailed instructions for Android can be found here: https://developers.google.com/maps/documentation/android-api/signup
  • More detailed instructions for iOS can be found here: https://developers.google.com/maps/documentation/ios-sdk/get-api-key

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:
    <key>NSLocationWhenInUseUsageDescription</key>
    <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() {
     MapView.setApiKey("<your_api_key>");
     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() {
    _mapView.show(new 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 Domain=com.google.HTTPStatus 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 <application> tag.

         <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="com.google.android.maps.v2.API_KEY" android:value="your_api_key"/>
         <meta-data android:name="com.google.android.gms.version" 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: https://console.developers.google.com/
  2. Enable Google Static Maps 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

Upcoming

  • [ ] Customize pin image
  • [ ] Remove markers
  • [ ] Bounds geometry functions
  • [ ] Polyline support

Usage examples

Show a map ( with a toolbar )

mapView.show(
        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

mapView.setMarkers(<Marker>[
    new Marker("1", "Work", 45.523970, -122.663081, color: Colors.blue),
    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));

Zoom to fit all the pins on the map

mapView.zoomToFit(padding: 100);

Receive location updates of the users current location

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

Receive marker touches

mapView.onTouchAnnotation.listen((marker) => print("marker tapped"));

Receive map touches

mapView.onMapTapped
     .listen((location) => print("Touched location $location"));

Receive camera change updates

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

Receive toolbar actions

mapView.onToolbarAction.listen((id) {
  if (id == 1) {
    _handleDismiss();
    }
});

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.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 pub.dartlang.com

[0.0.3] - 11-08-2017

  • Fixed Google Play Services dependency - https://github.com/apptreesoftware/flutter_google_map_view/issues/1
  • Added check for valid Google Play Services before displaying map. Will show dialog if out of date with option to update

[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

example/lib/main.dart

import 'dart:async';

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

///This API Key will be used for both the interactive maps as well as the static maps.
///Make sure that you have enabled the following APIs in the Google API Console (https://console.developers.google.com/apis)
/// - Static Maps API
/// - Android Maps API
/// - iOS Maps API
var API_KEY = "<your_api_key>";

void main() {
  MapView.setApiKey(API_KEY);
  runApp(new MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  MapView mapView = new MapView();
  CameraPosition cameraPosition;
  var compositeSubscription = new CompositeSubscription();
  var staticMapProvider = new StaticMapProvider(API_KEY);
  Uri staticMapUri;

  List<Marker> _markers = <Marker>[
    new Marker("1", "Work", 45.523970, -122.663081, color: Colors.blue),
    new Marker("2", "Nossa Familia Coffee", 45.528788, -122.684633),
  ];

  @override
  initState() {
    super.initState();
    cameraPosition = new CameraPosition(Locations.portland, 2.0);
    staticMapUri = staticMapProvider.getStaticUri(Locations.portland, 12,
        width: 900, height: 400, mapType: StaticMapViewType.roadmap);
  }

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
          appBar: new AppBar(
            title: new Text('Map View Example'),
          ),
          body: new Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              new Container(
                height: 250.0,
                child: new Stack(
                  children: <Widget>[
                    new Center(
                        child: new Container(
                      child: new Text(
                        "You are supposed to see a map here.\n\nAPI Key is not valid.\n\n"
                            "To view maps in the example application set the "
                            "API_KEY variable in example/lib/main.dart. "
                            "\n\nIf you have set an API Key but you still see this text "
                            "make sure you have enabled all of the correct APIs "
                            "in the Google API Console. See README for more detail.",
                        textAlign: TextAlign.center,
                      ),
                      padding: const EdgeInsets.all(20.0),
                    )),
                    new InkWell(
                      child: new Center(
                        child: new Image.network(staticMapUri.toString()),
                      ),
                      onTap: showMap,
                    )
                  ],
                ),
              ),
              new Container(
                padding: new EdgeInsets.only(top: 10.0),
                child: new Text(
                  "Tap the map to interact",
                  style: new TextStyle(fontWeight: FontWeight.bold),
                ),
              ),
              new Container(
                padding: new EdgeInsets.only(top: 25.0),
                child: new Text(
                    "Camera Position: \n\nLat: ${cameraPosition.center.latitude}\n\nLng:${cameraPosition.center.longitude}\n\nZoom: ${cameraPosition.zoom}"),
              ),
            ],
          )),
    );
  }

  showMap() {
    mapView.show(
        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)]);

    var sub = mapView.onMapReady.listen((_) {
      mapView.setMarkers(_markers);
      mapView.addMarker(new Marker("3", "10 Barrel", 45.5259467, -122.687747,
          color: Colors.purple));
      mapView.zoomToFit(padding: 100);
    });
    compositeSubscription.add(sub);

    sub = mapView.onLocationUpdated
        .listen((location) => print("Location updated $location"));
    compositeSubscription.add(sub);

    sub = mapView.onTouchAnnotation
        .listen((annotation) => print("annotation tapped"));
    compositeSubscription.add(sub);

    sub = mapView.onMapTapped
        .listen((location) => print("Touched location $location"));
    compositeSubscription.add(sub);

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

    sub = mapView.onToolbarAction.listen((id) {
      if (id == 1) {
        _handleDismiss();
      }
    });
    compositeSubscription.add(sub);

    sub = mapView.onInfoWindowTapped.listen((marker) {
      print("Info Window Tapped for ${marker.title}");
    });
    compositeSubscription.add(sub);
  }

  _handleDismiss() async {
    double zoomLevel = await mapView.zoomLevel;
    Location centerLocation = await mapView.centerLocation;
    List<Marker> visibleAnnotations = await mapView.visibleAnnotations;
    print("Zoom Level: $zoomLevel");
    print("Center: $centerLocation");
    print("Visible Annotation Count: ${visibleAnnotations.length}");
    var uri = await staticMapProvider.getImageUriFromMap(mapView,
        width: 900, height: 400);
    setState(() => staticMapUri = uri);
    mapView.dismiss();
    compositeSubscription.cancel();
  }
}

class CompositeSubscription {
  Set<StreamSubscription> _subscriptions = new Set();

  void cancel() {
    for (var n in this._subscriptions) {
      n.cancel();
    }
    this._subscriptions = new Set();
  }

  void add(StreamSubscription subscription) {
    this._subscriptions.add(subscription);
  }

  void addAll(Iterable<StreamSubscription> subs) {
    _subscriptions.addAll(subs);
  }

  bool remove(StreamSubscription subscription) {
    return this._subscriptions.remove(subscription);
  }

  bool contains(StreamSubscription subscription) {
    return this._subscriptions.contains(subscription);
  }

  List<StreamSubscription> toList() {
    return this._subscriptions.toList();
  }
}

1. Depend on it

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


dependencies:
  map_view: "^0.0.12"

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter packages get

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

3. Import it

Now in your Dart code, you can use:


import 'package:map_view/map_view.dart';
        
Version Uploaded Documentation Archive
0.0.12 Apr 17, 2018 Go to the documentation of map_view 0.0.12 Download map_view 0.0.12 archive
0.0.11 Apr 16, 2018 Go to the documentation of map_view 0.0.11 Download map_view 0.0.11 archive
0.0.10 Dec 30, 2017 Go to the documentation of map_view 0.0.10 Download map_view 0.0.10 archive
0.0.9 Dec 30, 2017 Go to the documentation of map_view 0.0.9 Download map_view 0.0.9 archive
0.0.8 Dec 29, 2017 Go to the documentation of map_view 0.0.8 Download map_view 0.0.8 archive
0.0.7 Dec 29, 2017 Go to the documentation of map_view 0.0.7 Download map_view 0.0.7 archive
0.0.6 Dec 27, 2017 Go to the documentation of map_view 0.0.6 Download map_view 0.0.6 archive
0.0.5 Nov 14, 2017 Go to the documentation of map_view 0.0.5 Download map_view 0.0.5 archive
0.0.4 Nov 8, 2017 Go to the documentation of map_view 0.0.4 Download map_view 0.0.4 archive
0.0.3 Nov 8, 2017 Go to the documentation of map_view 0.0.3 Download map_view 0.0.3 archive

All 12 versions...

Analysis

We analyzed this package on Apr 23, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.0.0-dev.49.0
  • pana: 0.10.6
  • Flutter: 0.3.2

Scores

Popularity:
Describes how popular the package is relative to other packages. [more]
96 / 100
Health:
Code health derived from static analysis. [more]
99 / 100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100 / 100
Overall score:
Weighted score of the above. [more]
98
Learn more about scoring.

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Suggestions

  • The description is too short.

    Add more detail about the package, what it does and what is its target use case. Try to write at least 60 characters.

  • Package is pre-v1 release.

    While there is nothing inherently wrong with versions of 0.*.*, it usually means that the author is still experimenting with the general direction API.

  • Fix analysis and formatting issues.

    Analysis or formatting checks reported 2 hints.

    Run flutter format to format lib/map_options.dart.

    Run flutter format to format lib/map_view_type.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.9.0 <2.0.0
flutter 0.0.0
uri ^0.11.1 0.11.2
Transitive dependencies
collection 1.14.6 1.14.9
matcher 0.12.2
meta 1.1.2
path 1.5.1
quiver 0.29.0+1
sky_engine 0.0.99
stack_trace 1.9.2
typed_data 1.1.5
utf 0.9.0+4
vector_math 2.0.6