Flutter – Maps and markers

Hi Friends,

Hope you are all well. In this post let’s talk about bringing maps into your flutter apps.

Though there are many providers who provide readymade service endpoints that we can simply call and use in our app to bring in a map. The commonly used ones are google maps and leaflet (Open source, doesn’t require a key).

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

Other flutter courses – here. (Affliate link)

A screencast of this post:

Let’s begin.

First create a blank flutter app.

Now add the flutter_map plugin which will help us bring a map into our mobile app. Open pubspec.yaml and add it to the dependencies as shown below.

Alright., Now open main.dart file and add the below code.

Now leaflet is open-sourced so, I have just used one of the free map templates in the urlTemplate. To make your own maps kindly visit a provider like mapbox which is a service that enables you to make your own map tiles and import them into your apps.

Cool. Now run the app. You will see the below screen

Screenshot_20180705-221611

Of course, the map on your screen might look a little bit different, but in essence a  map get’s loaded. Now let’s see how to navigate to a particular place on our map when we load it.

Open main.dart file and modify the options as shown below.

Run the app again.. (I mean run it again, not just wait for the hot reload)

You will see New york when it loads up now.

Screenshot_20180705-221634

Cool right ?

Markers:

Now, let’s talk about placing markers on the map.

Open up main.dart file and modify it as shown below.

I have now added a marker which is nothing but an icon button. I have placed the marker at a point using the point: attribute (Note that you could simply place your marker anywhere just by providing the lat lng coordinates of that specific location.

Now run the app. You will see the below screen.

Screenshot_20180705-224111

Similarly you could add any number of markers you want on the map.

(For some cool markers consider bringing in font awesome icons as well)

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

Join our community – here. (It’s free)

Thanks for reading. Peace.. :)

Liked it? Take a second to support admin on Patreon!
  • Chaitu

    How can we integrate mapbox maps?I am trying to do so but it gives me an error 422.

  • Chris

    Using the above example, the center of the pin is never on the exact GPS location specified.

    • Uhmm.. Maybe try with MapBox.. It’s the latest article on the site.. Thanks.