Skip to main content

 

 

 

 
 
Applies only to Mobile Apps and Reactive Web Apps
Service Studio version:
 
 
OutSystems

How to use the Map component

Template:OutSystems/Documentation_KB/ContentCollaboration
  • Edit
    Collaborate with us
    Edit this page on GitHub
  • Prerequisites

    You can use the Map component to provide an interactive satellite map to your users.

    Currently, only Google Maps is supported. Google Maps isn’t free. You must always buy an API key. For more info on getting an API Key, see Using API Keys.

    This example demonstrates how to highlight OutSystems office locations around the world on the OutSystems Map component using Markers.

    1. In Service Studio, in the Toolbox, search for Map.

      The Map widget is displayed.

      Map in the Service Studio toolbar

      If the UI widget does not display, it may be because you used a ready-made app, which deletes unused widgets from the module. To make additional widgets available in your app:

      a. Go to Module > Manage dependencies.

      b. Search for and select the relevant Producer, for example OutSystemsUI. Ensure Show All is selected.

      c. On the Public elements for the selected Producer displayed on the right, ensure Show All is selected.

      d. Search for and select the element you want to add, and click Apply.

      e. In Service Studio, in the Toolbox, search for the widget again.

    2. From the Toolbox, drag the Map widget into the Main Content area of your application's screen.

      Drag Map widget onto the screen

    3. On the Properties tab, enter an API key so that the "For development purposes" watermark is removed.

      Enter API key

    4. Create an aggregate (GetOffices) that fetches the office location data.

      Create an aggregate

    5. Drag the List widget onto the Drag markers here screen area and on the Properties tab, enter the List widget source (the list of offices).

      Drag List widget onto the screen

    6. Drag the Marker block into the List widget. On the Properties tab, from the Position dropdown, select the office address property.

      Note: Marker blocks can only be added to the Map block. To add markers to a Static Map, you can use the Markers input parameter.

      Drag Marker block onto the screen

    7. You can change the Map's look and feel by setting the (Optional) properties on the Properties tab.

    After following these steps and publishing the module, you can test the component in your app.

    Result

    Result

    Properties

    Property Description
    APIKey (Text): Optional Add a Google Maps API key to display the map correctly and remove the development purpose watermark. You can get an API key for Google Maps here.
    Center (Text): Optional Defines where the map is centered. Works with addresses and coordinates (latitude and longitude).

    If left empty, the default location is the OutSystems Boston office. Note that the map automatically adjusts to show all markers by default. You can override this by setting the Location and Zoom properties.

    On maps with markers, the default location is the location of the first marker on the list.
    Markers (Marker List): Optional Sets a location on the map. By default, the marker uses the Google Maps default marker. For more information, see Google Markers.
    Zoom (Zoom Identifier): Optional Sets the zoom level to apply to the map, with the levels ranging from 1 (world) to 20 (building).

    Examples
    • Auto: Fit to all markers present on the map. This is the default.
    • Zoom1: World
    • Zoom5: Continent
    • Zoom10: City
    • Zoom15: Streets
    • Zoom20: Buildings

    For more information, see Google Zoom Levels.
    Height (Text): Optional Sets the height of the map in pixels ("300px"), percentage ("100%"), or viewport height ("100vh"). If this property is left empty, the map fits to the parent height.

    If using percentages, ensure that the map has a parent with a fixed height value, otherwise, its height is 0 (zero).

    The height property value is applied to a CSS variable used on the OutSystems UI Theme. This variable can be overridden to manipulate the maps height on your CSS theme.
    Style (Style Identifier): Optional Sets the theme type based on themes provided by Google Maps. To create your own style, or to change the theme options, see Map Style with Google. When your custom theme is ready, use the AdvancedFormat property to apply it.
    Note: Any style applied is not visible if the Satellite type is selected.

    The available styles are as follows:
    • Standard (default)
    • Silver
    • Retro
    • Dark
    • Night
    • Aubergine

    For more information, see Styling your maps.
    Type (Type Identifier): Optional Sets the map type to either roadmap (default), satellite, hybrid, or terrain, provided by Google Maps. For more information, see Google Map Types.
    Offset (Offset): Optional Expand the options to set the Offset(X) vertical and the Offset(Y) horizontal in pixels to apply to a map. This is applied based on the defined Location.
    StaticMap (Boolean): Optional If True, the map is not interactive. If False, the map is interactive. (False is the default.) The static map API has the following limitations:
    • The AdvancedFormat property only works when applying a custom style to the map
    • The Offset property doesn't work when the StaticMap property is set to True
    • The static map doesn't react in runtime, switching the value on StaticMap property
    • Google Maps API has a URL Size Restriction (8192 characters)

    For more information, see Maps Static API.
    ShowTraffic (Boolean): Optional If True, traffic mode is enabled on the map. If False, traffic mode is not enabled. (False is the default.)
    AdvancedFormat (Text): Optional Allows for more options beyond what's provided through the input parameters. For more information, see Google Controls.
    ExtendedClass Adds custom style classes to the component. You define your custom style classes in your application using CSS.

    Examples

    • Blank - No custom styles are added (default value).
    • "myclass" - Adds the myclass style to the UI styles being applied.
    • "myclass1 myclass2" - Adds the myclass1 and myclass2 styles to the UI styles being applied.
    You can also use the classes available on the OutSystems UI. For more information, see the OutSystems UI Live Style Guide.
    • Was this article helpful?