When you are building flutter apps you follow flutterflow and you also need to add several useful features which benefit the users in different manners. As you add efficient features to your app, it is likely going to be encouraged by users. Several features together make an app useful. One of the main features to add to a Flutter app is adding Google Maps.
Adding Google Maps is important, especially for apps that use navigation services. So, in order to add Google Maps to our Flutter app, firstly, we need to get an API key for using Google Maps from console.cloud.google.com.
What is an API Key?
A Google Maps API key is a personal code that Google provides to access Google Maps on the site. Your API key provides you with a free quota of Google Map queries. It is a secret key that you should not share with anyone. Your Google account will be billed automatically for any usage that exceeds your quota.
Getting Started
To get started with this project, firstly, we need to get an API key from the Google cloud console. There will be a few more steps to get the API key.
Just go to console.cloud.google.com. You will be directed to the Google Cloud Platform page. Create a new project by simply clicking on the “CREATE PROJECT” button appearing on the top left side of the page. You’ll just need to add the project name. See here:
Now go to the navigation menu button appearing on the top left corner of the page and click APIs & Services.
Then click the “ENABLE APIS and Services” button with a plus sign.
A new page will open. Then click on map SDK for Android. See here:
A new page will appear. Click on the “ENABLE” button.
Similarly, for iOS, click on Maps SDK for iOS and then enable it as you did for android.
After that, you will be directed to a new page. Click on the credentials button from the left navigation bar and then click “CREATE CREDENTIALS”. A new popup will appear showing you the API key. As you can see both steps are here:
As I have mentioned earlier, your API key is a secret code that you shouldn’t share with anyone.
Now that you’re done getting the API key, it’s time to add plugins and the coding part.
Plugins
To add Google maps to flutter app, we need to add two dependencies. One is the Google map plugin and the other is the location plugin. Google map plugin is for adding google map features to the app and location plugin is used to get the current location of the users.
Add these plugins in your pubspec.yaml file and save it. Now, our project is going to be simple in a way that it will only have main.dart file. Let’s move on to adding the API key to our app.
- Open the AndroidManifest.xml file located in the android/app/src/main/ directory.
- In the AndroidManifest.xml file add the lines shown below.
<manifest <some code here> <uses-permissionandroid:name=”android.permission.ACCESS_FINE_LOCATION” /> <uses-permissionandroid:name=”android.permission.ACCESS_COARSE_LOCATION” />
- The above line will be used to allow access to the location of the user.
- Adding API in AndroidManifest.xml file inside <application> tag add the lines given below.
<meta-data android:name=”com.google.android.geo.API_KEY”android:value=”YOUR API KEY HERE”/>
In the field “YOUR API KEY HERE”, add the API key that you got from Google.
After adding that, you can save it and close it. That’s it with the plugin part. Now it’s time to move on to the coding part.
Code to Add Google Map to Flutter App
As it is not much complicated to add Google Map to flutter app, only main.dart file is going to handle this. Add the code given below to your project.
class MapPage extends StatefulWidget {
const MapPage({Key? key}) : super(key: key);
@override
_MapPageState createState() => _MapPageState();
}
class _MapPageState extends State<MapPage> {
final LatLng _initialCameraPosition = const LatLng(
20.5937,
78.9629,
);
late GoogleMapController _controller;
final Location _location = Location();
void _onMapCreated(GoogleMapController controller) {
_controller = controller;
_location.onLocationChanged.listen((l) {
_controller.animateCamera(
CameraUpdate.newCameraPosition(
CameraPosition(
target: LatLng(
l.latitude,
l.longitude,
),
zoom: 15,
),
),
);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SizedBox(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: GoogleMap(
initialCameraPosition: CameraPosition(target: _initialCameraPosition),
mapType: MapType.normal,
onMapCreated: _onMapCreated,
myLocationEnabled: true,
),
),
);
}
}
Let me give you a quick breakdown of the code above. I have created a stateful MapPage class and also created a state for it. Additionally, I have removed the App bar. In MapPageState class, the body consists of a Scaffold, Container with the height and width of the device. Inside that, a Google map widget is added.
The Initial camera position will be pointing to the latitude and longitude that I already defined with the LatLng datatype. I have set the normal map type. You can also change it to terrain, Satellite, and Hybrid types according to your desires. After the map is has been created, It will call the _onMapCreated function. I have also declared a GoogleMap controller. Inside the _onMapCreated function, whenever the location of the device changes, the camera will move to a new location. This makes the widget stateful. A red dot on the map will be representing the location of the user.
Screenshot of Added Google Maps
Conclusion
That’s it for the guide to adding Google Maps to a flutter app. I hope this article will help you in adding Google Maps to the flutter app. You can use this code as it is complementary 😉 or you can hire a flutter app developer for this task
You can easily know your current location, get google map flutter or do flutter geolocation with this Google Maps implementation. Make changes to the code according to your will. Happy Coding!
