Google Maps in Flutter — I
This article shows you how to add a Google Map widget to your Flutter application. Further in this blog series, we will also learn how to fetch markers from Cloud Firestore and draw routes between them.
Setup
The first step is to add the Google Maps Flutter plugin as a dependency in the pubspec.yaml file. The package is available as google_maps_flutter on pub.dartlang.org.
Once you do that, you need to run flutter packages get.
Next task is getting an API key. 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:
Adding a Google Map widget
Now you are ready to add a Google Map widget! Run flutter clean to make sure the API key changes are picked up on the next build. Then, add a Google Map widget:
- onMapCreated: method that is called on map creation and takes a GoogleMapController as a parameter.
- initialCameraPosition: required parameter that sets the starting camera position.
- mapController: manages camera function (position, animation, zoom).
If you run your app at this point, it should look like this:
Get Current Location using Geolocator
Add the Geolocator plugin as a dependency in the pubspec.yaml file.
Once you do that, you need to run flutter packages get.
To query the current location of the device simply make a call to the getCurrentPositionmethod:
So,we have our coordinates : position.latitude & position.longitude. Use these two double values as arguments for LatLng():
If you run your app at this point, it should look like this:
Let’s add a marker to our current location
Set this as the markers property of the Google Map widget.
If you run your app at this point, it should look like this:
Google Maps in Flutter-II is published.
