map_view
A flutter plugin for Google Maps
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
- Go to: https://console.developers.google.com/
- Enable
Maps SDK for Android
- Enable
Maps SDK for iOS
- Under
Credentials
, chooseCreate 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.
- Note: For development, you can create an unrestricted API key that can be used on both iOS & Android.
- More detailed instructions for Android can be found here: https://developers.google.com/maps/documentation/android-sdk/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
- Set the NSLocationWhenInUseUsageDescription in
ios/Runner/Info.plist
. Example:
- Prior to using the Map plugin, you must call MapView.setApiKey(String apiKey). Example:
Note: If your iOS and Android API key are different, be sure to use your iOS API key here.
-
Add code to show the MapView.
-
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:
Common API Key problems for iOS
-
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. -
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
-
In your
AndroidManifest.xml
, add the following uses-permission above thetag. -
In your AndroidManifest.xml, add the following lines inside of the
application
tag. Be sure to replaceyour_api_key
with the one you generated. -
Add the MapActivity to your AndroidManifest.xml
-
In your
android/build.gradle
file. UnderbuildScript
dependencies
add: -
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.
- Go to: https://console.developers.google.com/
- Enable
Maps Static API
- Once enabled, you can use the same API key you generated for iOS/Android.
- Initialize the StaticMapProvider
- 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:
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 )
Get notified when the map is ready
Add multiple pins to the map
Add a single pin to the map
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.
Then add asset to the pubspec.yaml under flutter tag.
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.
Set a Marker draggable and listening to position changes
First set the draggable attribute of a marker to true.
Now add listeners for the events.