Hi Friends,

A few days back, I wrote a post on bringing Mapbox maps and polygons into your flutter apps. Since then, I have received a lot of requests to do the same with Google Maps as well.

When I am writing this post, there isn’t an official widget to integrate Google Maps into your flutter apps, so we’ll be using the Google Static Maps API and a map_view plugin to bring in Maps.

To learn the basics of flutter get my course – Click here.

Other flutter courses – here. (Affiliate Link)

Let’s begin:

A screencast of this post.

 

Now as I said before, we’ll be making use of the Google Maps Static API to achieve our target. So first, obtain a key from the developer portal by clicking here.

Enable the Maps Static API and Maps SDK for android as shown below.

I have explained the steps to get the Key in the video. Kindly watch it once to figure out how to get the key.

Also, I would also like to point out one other detail. Google has severely restricted access to their cloud platform and it’s associated products. So now the free tier would allow only one request per day to their APIs. To increase this you need to add a billing account (which is essentially putting down your card). They won’t charge you anything, they’ll extend the free quota to a few thousand requests per month. ($200 in free credit every month for the Maps API, when you add a billing account).

Now that you have a key.

Go ahead and create a new flutter project. Open up the project and add the below dependency in pubspec.yaml file

Alright now open android -> app -> src -> main -> AndroidManifest.xml

Add these two lines inside the <application> tag.

Also include an activity as shown below.

Now open android -> build.gradle and under dependencies add the below line

Alright. That’s too much configuring that we have done. Let’s move on.

Open up main.dart file and add the below code.

Alright, it’s pretty much simple. We have simply added a button on our app. Upon tapping the button it will open up a map at the camera position that we have specified above. Run the app and you will see a nice map as shown below.

Nice right ?

Alright, Now let’s move on to the next part.

Markers & Polygons:

Open up main.dart file and add the below code.

Let’s break this down. We simply are including a list of markers and another a list containing a polygon.

I simply have one marker in the list. It’s also draggable. Also notice that I have just specified four coordinates as the Location, we specify the fill color with opacity so that a shade fills the entire polygon.

Now look at this snippet.

This simply sets the markers and polygons on our map. It also zooms the map in such a way that all our stuff on the map is shown on screen at the same time.

Notice that I have written this inside an onMapTapped listener. So all these markers, polygons will be displayed when the user taps on the map.

Now run this, and try tapping on the map. You would see a screen as shown below.

Tap on the marker and you would see the label that you defined while defining the marker in the list.

Now Tap and hold the marker, it will popup slightly indicating that you could now drag the map to anywhere on the screen.

That’s it for this post guys.

Next Steps:

Try setting the showUserLocation: true flag, you would see your location on the map as well. (Remember to set the permissions in the AndroidManifest.xml file as shown below.

Hope this post helped you guys. If you found this helpful, kindly share it with someone and help them too.

Donate to keep this site alive – here.

(If you want to donate but can’t, it’s fine just subscribe to my youtube channel).

Join our flutter community – here.

Thanks for reading. Peace..