Getting To Know Flutter: Google Maps Integration

In this tutorial you will learn how to add an interactive map provided by Google Maps in your Flutter app. We will use the official Google Maps package.

We will skip the “Getting started” part that you can find in the home page of the package to go directly o the juicy part. 
In brief you have to create an API Key from the Google Cloud Platform and set the key n your native Android and iOS projects.

We will start from a simple app, which is the one that you can find in the Readme of the package, a simple map centered in the Google Plex:

Add a marker

Let’s add a marker in the center of the google plex, to do this the GoogleMap Widget has a markers parameter that takes a Set of Markers objects. So the body of our Scaffold becomes:

When creating the Marker you can specify the content of the InfoWindow that will appear if the marker is tapped. With the onTap parameter you can also set a function that will be called if the marker is tapped.

Use a custom image for the marker

To use a custom image for your markers you will have to create a BitmapDescriptor, don’t worry you can create one of it from an image from the assets but this is an asynchronous function so we will have to load our image, and our markers, in the initState function. Le’s define 2 variables in our state, one for the bitmap descriptor and one for our markers and populate them in initState.

Now we need to use the markers that we’ve just created in our GoogleMap Widget.

Ensure that all markers are visible

If you have a lot of markers and you don’t know their positions, for example if the markers come from an API call, you will like to have all of them visible in the map. To do this we need to do the following:

  • Calculate the maps bounds to fit all the marker
  • Create a Camera request update
  • Perform the camera request update on the GoogleMapController object to move the camera

So our function to load the markers become:

Moving forward

If you want to find a complete example check out this repository.
You can use this as a base to implement an awesome map in your application.