This article was last updated on 03/19/19. The API for this plugin changed to be more idiomatic to Flutter. The article now reflects those API changes. Note that this plugin is still in Developers Preview.
This article shows you step-by-step how to add a Google Map widget to your Flutter application. Here’s what you’re going to build today:
Once you do that, you need to run flutter packages get.
The next step is getting an API key for both Android and iOS. For Android, follow the instructions at Maps SDK for Android — Get API Key. Once you have your API key, add it to your Flutter app in the application manifest (
android/app/src/main/AndroidManifest.xml), as follows:
On iOS, you also need to add a setting to the app’s Info.plist file (
ios/Runner/Info.plist). This entry forces Flutter on iOS into a single threaded mode, which is required for the platform view embedding to work. This technical restriction is being worked on and will be lifted before Google Maps moves out of Developer Preview.
Add a boolean property with the key
io.flutter.embedded_views_preview and the value
Adding a GoogleMap widget
Now you are ready to add a GoogleMap widget! Run flutter clean to make sure the API key changes are picked up on the next build. Then, add a GoogleMap widget that covers the entire screen:
- onMapCreated: method that is called on map creation and takes a MapController as a parameter.
- initialCameraPosition: required parameter that sets the starting camera position. Camera position describes which part of the world you want the map to point at.
- mapController: manages camera function (position, animation, zoom). This pattern is similar to other controllers available in Flutter, for example TextEditingController.
If you run your app at this point, it should look like this:
Upgrading to Google Maps SDK for iOS 3.0
After running your app in the last step, you may have seen the warning: “New version of Google Maps SDK for iOS available: 3.0”. This is because Flutter supports a minimum of iOS version 8, while the latest version of Google Maps SDK for iOS supports minimum iOS version 9. In order to use the latest version of Google Maps SDK for iOS, we need to raise our iOS for Flutter minimum version to 9.
Declare a minimum platform version of 9.0 by uncommenting this line in ios/Podfile:
platform :ios, ‘9.0’.
Then run (cd ios && pod update) from command line to pull the newest version of the Google Maps SDK for iOS.
Next, return to your main project directory (cd ..) and run open ios/Runner.xcworkspace/ from command line. This will open the iOS Runner Xcode project, where we need to set the Deployment Target iOS version to 9.0.
Run your app again, and verify the new version available warning is no longer there.
What can you do with a Google Map?
So now you have Google Maps in your app, but you probably want to do something more interesting. What about putting Flutter widgets on top of the map, changing the map’s appearance, or adding place markers to the map? You can do it all!
Add a widget on top of the map
It’s important to remember that the GoogleMap widget is just a Flutter widget, meaning you can treat it like any other widget. This includes placing another widget on top of it. By placing the GoogleMap widget inside of a Stack widget, you can layer other Flutter widgets on top of the map widget:
Change the map’s appearance
Right now, the added button doesn’t do anything interesting. Change that so that when pressed, the button toggles between two different map types: normal view and satellite view.
To do this, create a variable
_currentMapType to keep track of the current map type. Add
mapType: _currentMapType to the GoogleMap widget.
Now, add a method that will modify the value of
_currentMapType inside of a
setState() call. This will update the appearance of the map to match the new value of
() => print(‘button pressed’) with
Add a marker
How about creating another button that, when pressed, adds place markers to the map. Following the same pattern as before, add a button to the stack. Place another FloatingActionButton inside the Align widget from the build method. You’ll need to wrap both FloatingActionButtons in a Column widget:
To implement the
_onAddMarkerButtonPressed method, we need to do a couple things. First, create a variable called
_markers to store the map’s markers. Set this as the
markers property of the GoogleMap widget.
To add a marker in the center of the map, we need to track the map’s current camera position. Add the following code to do that:
Now, we can add a marker to the map by modifying the content of
_markers inside of a
You can customize the markers with different colors, for example
BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueViolet), or even with custom icons, for example
Final main.dart code
What else can you do?
Once again, the GoogleMap widget is just a widget. This means you can place widgets on top of it (like you just did), you can place it inside other widgets (like a ListView, for example), or if you’re feeling a bit wild, you could even place it in a Transform widget*.
The possibilities extend as far as you’d like to take them. Checkout the Place Tracker app in flutter/samples for a more complete Google Maps demo. You can also checkout the google_maps_flutter plugin example app for a demonstration on using the plugin.
*Using a transform widget to rotate the map is currently not supported on iOS. It might be in the future, but it is not the biggest priority for the plugin at this time.