- Download and install the OutSystems Map component from Forge.
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.
In Service Studio, in the Toolbox, search for
The Map widget is displayed.
From the Toolbox, drag the Map widget into the Main Content area of your application's screen.
On the Properties tab, enter an API key so that the "For development purposes" watermark is removed.
Create an aggregate (GetOffices) that fetches the office location data.
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 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.
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.
|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).
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:
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:
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||Add custom style classes to the component. You define your custom style classes in your application using CSS.