Google Maps in Flutter-II

Piyush Sinha
Flutter Community
Published in
3 min readSep 2, 2019

--

In this blog we will discuss Geocoding and fetching markers from Cloud Firestore.

In case you missed the first blog: Google Maps in Flutter- I

Geocoding

Translate an address into latitude and longitude coordinates and vice-versa.

Let’s get the address of our current location using the geocoordinates which we fetched earlier in this blog series.

I am displaying just a few details about the place. You can get all the details about the place as:

placemark[0].country
placemark[0].position
placemark[0].locality
placemark[0].administrativeArea
placemark[0].postalCode
placemark[0].name
placemark[0].subAdministratieArea
placemark[0].isoCountryCode
placemark[0].subLocality
placemark[0].subThoroughfare
placemark[0].thoroughfare

Make a call to getAddress() from getLocation() :

Finally, use the snippet attribute of InfoWindow to display the _address:

If you run your app at this point, it should look like this:

Fetching Markers From Cloud Firestore

I’m using my ongoing project’s database for this :

As you can see in the screenshot above, I have 3 markers stored as Blood Request Details and their coordinates are stored as geopoints. We are going to fetch and display them on our Google Map Widget.

See the populateClients() here, I’m fetching the markers from the firestore and calling initMarker() that no.of times.

Create a map of markers which will store our fetched markers:

Map<MarkerId, Marker> markers = <MarkerId, Marker>{};

initMarker() simply creates a marker from the fetched data and adds it to the map of markers. See the code below:

Make a call to populateClients() from the initState():

Lastly use this map of markers for the markers property of the Google Map widget:

If you run your app at this point, it should look like this:

And on tapping on any of the marker you can see their address in the infoWindow:

That’s it for this blog! I hope you enjoyed it, and leave a few claps if you did. In the next blog we will learn to draw routes between the markers and calculate distance between them. Follow me for more Flutter articles and comment for any feedback you might have about this article.

--

--