Is It Possible To Remove Apple Map Background Dynamically In My App

How to add Google Maps in a flutter app and get the current location of the user dynamically?

Add Google map feature in your flutter app

Adding a map feature to an app is essentials when you are creating an app that helps the users to navigate. So, in that case, we should add Google Map support to our flutter app. The first thing that we're going to do is we're going to get an API key for using the Google map from console.cloud.google.com.

What is API Key?

An API key is a secret key that you should not share with anyone. An API key may be also used to find who is making a request. So, this data can be used for further references for Google.

Getting Started

Getting started with this project at first we need to get an API key from Google cloud console. There will be some procedures to get the API key. You need to go to console.cloud.google.com.

After logging into the console.cloud.google.com you'll land on the above page. After moving to it, You will be asked to create a new project. You should add some details that they're asking for. You'll land on the above page after filling those details. Now, You can click the APIs and Services in the left navbar. Then you will be taken to the below page. Once you were taken to the new page click on Map SDK for android.

You will be taken to the above page. So, click on the enable button to enable the Google Map API. On enabling that thing you will be taken to the Next page in the Metrics page now click on Credentials in the navbar from where you can obtain your API.

Since I have said you It's like a credential you should not share with anyone. In the below page you can see your API key you can copy it with the icon near that.

After getting the key the first part is over now let's see the Coding and Plugins part. We should add some plugin to our flutter app and we should also add the API key that we got in console.cloud.google.com.

Plugins

We are going to add two dependencies One is Google map plugin and location plugin. Google map plugin is used to add google map features to the app and location plugin is used to get the current location of the users.

            dependencies:                          google_maps_flutter: ^0.5.30                          location: ^3.0.2

Add these plugin in your pubspec.yaml file and save it. Here, our project is going to be simple that it will only contain main.dart file. Ok, Let move to adding the API key to our app.

Open up the AndroidManifest.xml file located in android/app/src/main/ directory.
In the AndroidManifest.xml file add the below lines.

            <manifest <some code here>                          <uses-permission            android:name="android.permission.ACCESS_FINE_LOCATION" />                          <uses-permission            android:name="android.permission.ACCESS_COARSE_LOCATION" />

The above line will be used to permission to access the location of the user
Adding API in AndroidManifest.xml file inside <application> tag add below lines.

            <meta-data android:name="com.google.android.geo.API_KEY"            android:value="YOUR API KEY HERE"/>

In place of YOUR API KEY HERE add your API key that you got from Google.

After adding that you can save it and close it. Now we'll move on to the coding part.

Let's Code

Since I have said that the app is just going to be simple and stateful the only file that going to handle is the main.dart file. Add the below main.dart below files in your project file.

Ok, Let me explain the code. I have created a stateful MyHomePage class and also created a state for it. Also, I have removed the App bar. In MyHomePageState class the body consists of a Scaffold, Container with the height and width of the device. Inside that, a stack is created and a Google map widget is added to it. The Initial camera position will be pointing to the latitude and longitude that I already defined with LatLng datatype. I have set the map type as normal. You can also change it to terrain, Satellite, and Hybrid types. After the map is created It will call the _onMapCreated function. I have also declared a GoogleMap controller. Inside the _onMapCreated function whenever the location of the device is changed the camera will be a move to the new location. This makes the widget stateful. The users' location will also be marked on Map with a blue dot.

That's with the total app. Just within the 100 lines of code, the app is completed. If you liked the Blog and if your wish to contribute to me you can now contribute through buy me a coffee.

Screenshots

I have added the output of the final app

Conclusion

That's up with developing a Google map with the user's current location flutter. I hope that you have got something with this story. You can download the code from GitHub from here. You can customize it to your needs. Happy Coding! :)