Troubleshooting Guides Docs Feedback

GoogleMap

The Google Maps widget allows you to display a map in your app, providing users with geographical information and navigation functionalities.

For example, a food delivery app might use this widget to show the location of restaurants and the delivery route to the user's address. The widget can be customized to display different types of maps and markers.

Prerequisites

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

Adding GoogleMap widget

To add the GoogleMap widget:

  1. Open the Widget Palette and locate the GoogleMap widget under the Base Elements tab. You can drag it into your desired location or add it directly from the widget tree or canvas area.

  2. By default, the map displays a random location. To set a specific location, go to the Properties Panel > Initial Location.

    1. Enter the latitude and longitude values in the Lat and Lng fields to specify the location.

    2. To use the user's current location, you can set a variable through the Set Variable menu > Global Properties > Current Device Location.

  3. To change the map type, go to the Properties Panel > Map Type and select one of the following options:

    • Roadmap: Displays the default road map view.

    • Terrain: Shows a physical map based on terrain information.

    • Hybrid: Combines normal and satellite views.

    • Satellite: Displays satellite images from Google Earth.

  4. To change the map's overall theme, navigate to the Properties Panel > Map Style and choose from the available options.

  5. To set the initial zoom level of the map, go to the Properties Panel > Initial Zoom of Map and enter the desired value. Note that a higher value will zoom in on the map while a lower value will zoom out.

If you don't see your current location while testing, make sure you have enabled location permission in your browser.

Adding markers

A marker is an icon that appears over the map, indicating a location. To add markers:

  1. Select the GoogleMap widget, move to the Properties Panel > Num Markers and select whether you want to show Single or Multiple markers.

  2. Set the Marker Type to Document if the data is on Firestore Collection; otherwise, set it to LatLng to load from a variable.

    1. If you choose Document, create a collection and query it on any widget (must be a parent of GoogleMap) or page.

    2. In Marker Document, set the source of markers.

  1. If you choose LatLng, you must provide a source that contains a list of locations as Data Type <Lat Lng> (e.g., App State > [variable_name] (List <Lat Lng>)).

Changing marker color

To change the marker color, move to the Properties Panel > Google Map > set the Marker Color dropdown value to the color you like:

Set marker image

Custom marker image can make your map interface more intuitive and visually engaging. To set any image as a marker:

  1. Move to the Properties Panel > Google Map > set the Marker Icon to Image.

  2. Select the type of image you want to set:

    1. For an image hosted online, set the Image Type to Network and specify the image URL in the Path field.

    2. To provide an image from your system, set the Image Type to Asset and upload the image.

Centering map on marker tap

To center a map on a marker tap, move to the Properties Panel > Google Map > enable the Centering Map on Marker Tap toggle.

Get notified on marker tap

Sometimes, you might want to get a callback when a user taps on a marker. This is helpful for dynamically displaying additional information about the location, opening a detailed view, or initiating other actions based on the selected marker.

This is how you do it:

  1. Select the GoogleMap widget.

  2. Select Actions from the Properties panel and open Action Flow Editor.

  3. Select On Marker Tap.

  4. Now, you can add any action here.

Customizing

You can customize the appearance and behavior of this widget using the various properties available under the properties panel.

Allow interacting with the map

By default, the map interaction feature is enabled, allowing users to drag, zoom in, and zoom out on the map. However, you can disable the Allow Zooming the Map and Show Zoom Buttons on the Map options if you wish to restrict the zoom functionality.

To access these settings, navigate to the Properties Panel > Google Map > Allows Interacting with the Map.

Show User Location

When enabled, a blue dot appears on the map to indicate the user's current location. If the map is moved, users can re-center their location by clicking the button at the top right side.

To enable this option, navigate to the Properties Panel > Google Map > enable the Show User Location toggle.

When you enable this option, make sure to set the Initial Location to Global Properties > Current Device Location.

Showing compass

While exploring the map, users may rotate the map (which can make it difficult to trace the route). Enabling compass will allow users to bring the map to its original direction.

To enable the compass, navigate to the Properties Panel > Google Map > enable the Show Compass toggle.

Enabling map toolbar

The Toolbar, located at the bottom right of the map, becomes visible when a user selects a marker. It offers quick access to either a map view or directions in the Google Maps mobile app.

To enable the toolbar, navigate to the Properties Panel > Google Map > enable the Show Map Toolbar toggle.

Showing traffic on map

Showing traffic on the map allows user to know the flow of traffic on the roads and helps them decide on a better route.

To show live traffic on a map, navigate to the Properties Panel > Google Map > enable the Show Traffic on Map toggle.

Common widget properties

See how to work with Widget Styling, Visibility, Padding & Alignment, and Testing.

Last Updated Date: April 18, 2024

PreviousStaticMapNextAdBanner

Last updated