FlutterFlow Docs
Search…
Actions
GoogleMap
GoogleMap widget can be used for many purposes such as finding nearby places (restaurants, gas stations, etc), finding directions to a destination, knowing traffic on your route, bicycle-friendly routes, satellite imagery, etc.
GoogleMap

Prerequisites

Before you start adding the Google Map widget, you'll need to add the API keys.

Adding GoogleMap to your project

Adding GoogleMap widget

To add the GoogleMap widget to your project:
Simply drag the GoogleMap widget from the Base Elements tab (in the Widget Panel) or add it directly from the widget tree.
Adding GoogleMap widget

Setting initial location

When users open the map, it should show some location at first. Setting the initial location allows your users to see the map with a specific location or user's current location when it opens up.

Setting specific location

To open a map with a specific location:
  • Select GoogleMap from the widget tree or from the canvas area.
  • Move to the Property Editor and scroll down to the Initial Location.
  • Enter the values in Lat and Lng property.
To get the lat long values for any location, open to Google Map, right-click on any place and click on the first item from the list. It should look like this 19.080045795863743, 72.8794235725136.
Setting specific location

Setting users current location

To open a map with the user's current location:
  • Select GoogleMap from the widget tree or from the canvas area.
  • Move to the Property Editor and scroll down to the Initial Location.
  • Click on the Set from Variable text. (on the right side of the Initial Location label)
  • Find the Source dropdown, click on unset, and select the Custom Function from the list.
  • Find the Function Name dropdown below, click on unset and select the + Create New Function.
  • A popup will appear to create a Custom Function.
    • Enter the function name such as getUsersLocation.
    • Find the Data Type dropdown, and set it to LatLng from the list.
    • Now, click on the + Add Argument button below.
    • Enter the Argument 1 Name as userLocation, and set the Data Type to LatLng.
    • Switch to the Code tab and replace the text '// Add your function code here!' with the following code.
    • Click on Save.
if (userLocation == null ||
(userLocation.latitude == 0 && userLocation.longitude == 0)) {
return LatLng(40.8295538, -73.9386429);
}
return userLocation;
  • Find the Set Functions Argument section. Click on userLocation.
  • Set the Value Source to From Variable and Source to Global Properties.
  • Set the Available Options dropdown to Current User Location.
  • Click Save.
  • Click on Run to test the app in Run-Mode.
Setting users current location
If don't see your current location while testing, make sure you have enabled location permission in your browser.
Enabling location permission

Adding markers

A marker is an icon that appears over the map indicating a location. This section describes how to work with markers in your FlutterFlow project.
Adding markers to the map comprises the following steps:
  1. 1.
    Creating markers collection
  2. 2.
    Adding markers data into the collection
  3. 3.
    Showing markers on the map

1. Creating markers collection

To display markers on the map, you first need to create a collection that holds the marker data.
​Here are the instructions on how to create a collection.

2. Adding markers data into the collection

​Here are the instructions on adding data to the collection

3. Showing markers on the map

Before showing markers on the map, you should query and load all the markers data from the firestore collection.
​Here are the instructions on querying collection data.
To show markers on the map:
  • Select GoogleMap from the widget tree or from the canvas area.
  • Move to the Property Editor and scroll down to find the Num Markers property.
  • Click on None and change it to Multiple.
  • Find the Marker Documents property below, Click on Unset. This will open a window in the right panel.
  • Click on Unset, select your collection from the list.
  • Click Save.
Showing markers on the map
Finally, click Run to see markers on the map.
Running Google Map with Markers

Changing marker color

To change the marker color:
  • Select GoogleMap from the widget tree or from the canvas area.
  • Move to the Property Editor and scroll down to find the Marker Color property.
  • Change the Marker Color dropdown value to the color you like.
Changing marker color

Centering map on marker tap

To center a map on a marker tap:
  • Select GoogleMap from the widget tree or from the canvas area.
  • Move to the Property Editor and scroll down to find the Centering Map on Marker Tap property.
  • Click on Centering Map on Marker Tap checkbox to enable it.
Centering map on marker tap

Showing marker data in bottom sheet

Your users may want to see more details when they click on a marker. One way is to open a Bottom sheet to display more information.
To create a bottom sheet that accepts marker data:
  • Create a Bottom Sheet using the instruction here and design a layout to display marker data such as name.
  • After creating the Bottom Sheet component, select the component from the widget tree.
  • Click on the Define parameter icon
    ​
  • Click on + Add Parameter and enter the parameter name and set the Type to Record. Setting the Type to Record allows you to accept a single firestore document.
  • Set the Record Type to the Firestore collection that holds the marker data.
  • Click Save.
Showing marker data in bottom sheet
To show marker information in the bottom sheet layout:
  • Select the Text widget inside the bottom sheet component.
  • Move to Property editor and click on the Set from Variable.
  • Click on the Source dropdown and set it to the collection that holds marker data.
  • Set the Available Options to any value present in the collection.
  • Click Save.
Showing marker information in bottom sheet
To add an action to open the bottom sheet with marker data:
  • Select GoogleMap from the widget tree or from the canvas area.
  • Add an action using the instructions here.
  • Keep the Action tab open, Scroll down and click on + Pass in Parameter. This will automatically select the collection that holds the marker data.
  • Click on the collection name, scroll down to find the Source dropdown, and set it to Marker Record.
Adding action to open bottom sheet
Finally, here's how you see the marker data in a bottom sheet:
Running Google Map with Markers and Bottom Sheet

Customizing map

Various properties under the Properties Panel can be used to customize the appearance and behavior of your widget.

Changing map type

Changing the Map type allows you to set the following types of maps:
  • RoadMap: It shows the default road map view.
  • Terrain: It shows the physical map based on terrain information.
  • Hybrid: It shows the map with a mixture of normal and satellite views.
  • Satellite: It shows the map with Google Earth satellite images.
To change the map type:
  • Select GoogleMap from the widget tree or from the canvas area.
  • Move to the Property Editor and scroll down to the Map Type property.
  • Click on the RoadMap to change Map Type value.
Changing map type

Changing the map style

Changing the Map style allows you to change the overall theme of the map.
To change the map style:
  • Select GoogleMap from the widget tree or from the canvas area.
  • Move to the Property Editor and scroll down to the Map Style property.
  • Click on the Standart and select the style.
Changing the map style

Changing the initial zoom

To change the initial zoom level of the map:
  • Select GoogleMap from the widget tree or from the canvas area.
  • Move to the Property Editor and scroll down to find the Initial Zoom of Map property and enter the value.
A higher value will zoom into the map whereas a lower value will zoom out the map.
Changing the initial zoom

Allow interacting with the map

Enabling this property will allow users to drag and zoom in-out into the map.
Here's how you allow interacting with the map:
  • Select GoogleMap from the widget tree or from the canvas area.
  • Move to the Property Editor and scroll down to find the Allow Interacting with the Map property.
  • Click on Allow Interacting with the Map checkbox to enable it.
Enabling this property by default, allows you to zoom in and out of the map. However, you can uncheck the Allow Zooming the Map and Show Zoom buttons on the Map checkboxes if you wish to disable the zoom feature.
Allow interacting with the map

Showing compass

While exploring the map, users may rotate the map (which can be difficult in tracing the route). Enabling Compass will allow users to bring the map to its original direction.
To enable the Compass:
  • Select GoogleMap from the widget tree or from the canvas area.
  • Move to the Property Editor and scroll down to find the Show Compass property.
  • Click on Show Compass checkbox to enable it.
Showing compass

Enabling map toolbar

The Toolbar appears at the bottom right of the map when a user taps a marker. It provides access to a map view or directions request in the Google Maps mobile app when a user taps on any icon in the toolbar.
To enable the toolbar:
  • Select GoogleMap from the widget tree or from the canvas area.
  • Move to the Property Editor and scroll down to find the Show Map Toolbar property.
  • Click on Show Map Toolbar checkbox to enable it.
Enabling map toolbar

Showing traffic on map

Showing traffic on the map allows user to know the flow of traffic on the roads and help them decide on a better route.
To show live traffic on a map:
  • Select GoogleMap from the widget tree or from the canvas area.
  • Move to the Property Editor and scroll down to find the Show Traffic on Map property.
  • Click on Show Traffic on Map checkbox to enable it.
Showing traffic on map

Connecting to Firestore Data

This section describes how to work with the Firestore data such as creating a collection, adding data to the collection, querying collection, etc.
The Steps to connect to Firestore Data are as follows:
  1. 1.
    Creating collection
  2. 2.
    Adding data to collection
  3. 3.
    Querying collection

1. Creating a collection

Here's an example of creating a collection:
  • Make sure you have completed all steps in the Firebase Setup section for your project.
  • Click on the Firestore in the left side menu.
  • Click on the (+) Plus sign button. (right side of Collection label)
  • A popup will appear, Enter the collection name and click Create Button.
  • Now, select the newly created collection from the left and click on the + Add Field.
  • Enter a field_name as name and set the Data Type to String. This will hold the title of marker.
  • Similarly, add another field as location and set the Data Type to Lat Lng.
Creating collection

2. Adding data to the collection

To add data into the collection:
  • Click on the Firestore in the left side menu.
  • Select your collection from the list on the left side.
  • Click on the Manage Content. This will open up a new browser window.
  • Select your collection and click on + Add Document.
  • Enter the name and location for any location.
  • Similarly, add multiple documents to display multiple markers on the map.
Adding data to the collection

3. Querying collection

To query firestore collection:
  • Select the page from the widget tree.
  • Click on the Backend Query tab (on the right side of your screen).
  • Set the Query Type to Query Collection.
  • Scroll down to find the Collection dropdown and change it to the collection that holds the marker data.
  • Set the Query Type to List of Documents.
  • Click Save.
Querying collection

Show/Hide GoogleMap

Please find the instructions to show/hide the widget here​
Copy link
On this page
Adding GoogleMap to your project
Adding GoogleMap widget
Setting initial location
Adding markers
Changing marker color
Centering map on marker tap
Showing marker data in bottom sheet
Customizing map
Changing map type
Changing the map style
Changing the initial zoom
Allow interacting with the map
Showing compass
Enabling map toolbar
Showing traffic on map
Connecting to Firestore Data
1. Creating a collection
2. Adding data to the collection
3. Querying collection
Show/Hide GoogleMap