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.
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:
1.Select GoogleMap from the widget tree or from the canvas area.
2.Move to the Property Editor and scroll down to the Initial Location.
3.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:
1.Select GoogleMap widget, move to the properties panel, find the Initial Location property and click Set from Variable.
2.Set the Source to Global Properties > Current Device Location.
3.Click Confirm.
Setting users current location
If you don't see your current location while testing, make sure you have enabled location permission in your browser.
Enable location permission
Adding markers
A marker is an icon that appears over the map indicating a location.
To add markers:
Select the GoogleMap widget, move to the properties panel, scroll down to Num Markers dropdown and select whether you want to show Single or Multiple markers.
Set the Marker Type to Document if the data is on Firestore Collection; otherwise, set it to LatLng to load them from a list of type <Lat Lng>.
If you choose Document, create a collection and query it on any widget (must be a parent of GoogleMap) or page.
In Marker Document, click Set from Variable.
Select Source as [collection_name] Document and Available Options to the field that holds the location data.
Click Confirm.
Markers from Firestore collection
Location data in Firestore collection
If you choose LatLng, In Marker LatLngs, click Set from Variable.
Now, you must provide a source that contains a list of locations as Data Type <Lat Lng> (e.g., Local State > [variable_name] (List <Lat Lng>)).
Click Confirm.
Markers from list of locations
List of locations in a local state variable
Changing marker color
To change the marker color:
1.Select GoogleMap from the widget tree or from the canvas area.
2.Move to the Property Editor and scroll down to find the Marker Color property.
3.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:
1.Select GoogleMap from the widget tree or from the canvas area.
2.Move to the Property Editor and scroll down to find the Centering Map on Marker Tap property.
3.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:
1.Create a Bottom Sheet using the instruction here and design a layout to display marker data such as name.
2.After creating the Bottom Sheet component, select the component from the widget tree.
3.Click on the Define parameter icon 
​
4.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.
5.Set the Record Type to the Firestore collection that holds the marker data.
6.Click Save.
Showing marker data in bottom sheet
To show marker information in the bottom sheet layout:
1.Select the Text widget, move to the properties panel, and click Set from Variable.
2.To display data from the parameter, select the Source as the parameter name (that holds the document) and Document Properties to the field you wish to show.
3.You can also set a Default Variable Value if you wish to.
4.Click Confirm button.
Showing marker data in UI element
To add an action to open the bottom sheet with marker data:
1.Select GoogleMap from the widget tree or from the canvas area.
2.Add an action using the instructions here.
3.Keep the Action tab open, Scroll down and click on + Pass in Parameter. This will automatically select the collection that holds the marker data.
4.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:
1.Select GoogleMap from the widget tree or from the canvas area.
2.Move to the Property Editor and scroll down to the Map Type property.
3.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:
1.Select GoogleMap from the widget tree or from the canvas area.
2.Move to the Property Editor and scroll down to the Map Style property.
3.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:
1.Select GoogleMap from the widget tree or from the canvas area.
2.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:
1.Select GoogleMap from the widget tree or from the canvas area.
2.Move to the Property Editor and scroll down to find the Allow Interacting with the Map property.
3.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:
1.Select GoogleMap from the widget tree or from the canvas area.
2.Move to the Property Editor and scroll down to find the Show Compass property.
3.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:
1.Select GoogleMap from the widget tree or from the canvas area.
2.Move to the Property Editor and scroll down to find the Show Map Toolbar property.
3.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:
1.Select GoogleMap from the widget tree or from the canvas area.
2.Move to the Property Editor and scroll down to find the Show Traffic on Map property.
3.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.​Creating collection​
2.​Adding data to collection​
3.​Querying collection​
1. Creating a collection
See how to create a collection. Here is how to parks collection looks:
parks collection
2. Adding data to the collection
To add data into the collection:
1.Click on the Firestore in the left side menu.
2.Select your collection from the list on the left side.
3.Click on the Manage Content. This will open up a new browser window.
4.Select your collection and click on + Add Document.
5.Enter the name and location for any location.
6.Similarly, add multiple documents to display multiple markers on the map.
Adding data to the collection
3. Querying collection
To query firestore collection:
1.Select the page from the widget tree.
2.Click on the Backend Query tab (on the right side of your screen).
3.Set the Query Type to Query Collection.
4.Scroll down to find the Collection dropdown and change it to the collection that holds the marker data.
5.Set the Query Type to List of Documents.
6.Click Save.
Querying collection
Show/Hide GoogleMap
Please find the instructions to show/hide the widget here​
StaticMap
AdBanner
Last modified 5mo ago