Check Mobile App
Read now
Start a Project

MapView in Flutter

Save

MapView in Flutter has become a common feature in the application nowadays. In our day-to-day life, Google Maps play an important role while we are travelling to some new places. For integrating Google Maps in flutter, there is an official plugin available.

In this blog, we will build an application rendering the Google Map with some basic features like loading map, fetching the current location of user and zoom.

Before starting with the development of the application, firstly we have to get the Google Map API Key for our app.

To create Google Map API Key, we have to follow few steps-

  1. Go to Google Cloud Platform(GCP) Console
  2. Create and Setup a new Project on GCP
  3. Add Google Maps SDK for Android & iOS
  4. Create an API Key on GCP

After creating the API Key, we will setup our Flutter Project to display Google Map.

For Android, we need to add API Key in AndroidManifest.xml, navigate to android/app/src/main/AndroidManifest.xml

For iOS, we need to add API Key in AppDelegate.swift file, navigate to ios/Runner/AppDelegate.swift

In our Info,plist file we need to add this statement, in order to opt-in to embedded views preview for iOS. It is mandatory to add in order to display the map.

To get the permission for location, you can add the below statement in Info.plist file

Now our app has been setup for both Android and iOS platform.

Let’s begin with the code…

1. Loading of Map

So, as we know that there is plugin available for GoogleMaps in flutter , so we are going to add the dependency in our pubspec.yaml file

After adding the dependency, we will create GoogleMap Widget in our main.dart file

In this GoogleMap() Widget, initialCameraPosition is a mandatory parameter.

2. Zoom Feature

We can apply zoom in and out feature by making zoomControlsEnabled : true, but in this we have created the custom buttons.

The output will be –

 

3. Fetching Current Location

For fetching the current location, we have to add another dependency into pubspec.yaml file i.e. geolocator

Firstly, we have to import the geolocator package into our main.dart file .

 

Now, we have to initialize the Geolocator and here we have defined a function for fetching the current location

The output will be as follows-

In order to fetch the location at the time of app launch, we have called the _getCurrentLocation() inside init(). We can also perform this action onTap of a button.

Conclusion

I hope this blog will help you in knowing  the basics of MapView in Flutter. Thanks for reading.

 

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


2 comments

  • samuel
    ok superb I would like to know how to print this map in pdf format or take a screenshot
  • Laraib
    After polyline is formed in webview flutter can current location marker move along polyline without exiting the application.
  • css.php

    When I think in getting solutions for my Ecommerce Platform, I think of Webkul. They have been such a blessing in our business. We have spent thousands of dollars in support and modules from them. We love their support team. They work very closely with us, and they always go the extra mile when we need help.

    Michael Urresta

    Michael Urresta

    Talk to Sales

    Global

    Live Chat
    Start a Project

      Message Sent!

      If you have more details or questions, you can reply to the received confirmation email.

      Back to Home