Flutter – Geocoding

Hi Friends,

Hope you are all well. In one of our previous posts, we saw how to bring in leaflet maps into your flutter apps. In this post let’s see how to add markers onto maps in real-time with the help of geocoding. (i.e., on tap of a button).

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

Other flutter courses – here. (Affliate link)

Let’s begin.

A screencast of this post.

 

I believe you have already read my post on bringing in leaflet maps into your flutter apps. If you haven’t, then kindly read it here.

Grab a copy of the code that we used previously from here. This is crucial as we would be continuing from where we left off.

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

Let’s break this down.

There is nothing fancy in this. We are simply creating a List<Marker> allMarkers and then adding all our markers to this list. Then we are simply returning this list to the MarkerLayerOptions which then places these on the map.

Geocoding:

What’s that ? Well, in a real application you aren’t going to get the location from the user as latitude and longitude coordinates right? Usually the user enters an address and you would need to convert that address into latitude and longitude coordinates. This conversion is called geocoding. (This can happen vice versa as well and that process is reverse geocoding).

Alright to do some basic geocoding let’s go ahead and make use of a geocoder plugin.

Open up pubspec.yaml and paste the following dependency:

Now what we’ll do is add a button on the appbar. Upon tapping the button, we’ll provide a dialog in which the user can enter an address and tap on a button. A marker will be placed on the map on that specific address.

Now just for a demonstration purpose, I’ll simply hard-code an address instead of providing a text field for the user. To know how to provide a text field and to bring in similar form field widgets into your flutter apps read my previous post here.

Now open up main.dart file and add the below code.

Let’s break this down.

If you notice, I have added a new button to the top left of the appBar. Upon clicking this button a dialog will open up. As of now I have hardcoded an address. But this is where you would place an input text field widget and ask the user to enter an address.

This address is then converted geocoded into coordinates in the addToList() method. This is then added as a marker into the allMarkers list which gets displayed on the map as shown below.

Screenshot_20180717-220509

Cool, now simply change the address and try once again. For instance I am changing it to Englewood in the addToList() method now.

You will see a marker added along with the previous marker as well.

Screenshot_20180717-220728

Try tapping them and watch the debug console.

Similarly you could add multiple markers as you wish. In our next post let’s see how to store and retrieve these markers upon map init.

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

Donate – here.

Join our flutter community – here.

Thanks for reading. Peace.. :)

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

    Hi, Can I add more controllers “on” the map ?
    I need to add more features and controllers like buttons that asking my database for something and other features like a (moving marker) with my location ? Is that possible here or what do you think?

    Thanks anyway for this wonderful tutorial :)