GuidesReferenceChangelogVideosDiscord
Sign UpLogin

Map

organizing info

The Map Web Control is used for showing location information on a map image. This Control allows to highlight a specific location or show directions from one point to another.

Properties

User Map Interactions

Disable Double Click Zoom

If checked, the user cannot zoom by double-clicking.

Fullscreen Control

If checked, the full-screen control will be visible on the map. Clicking on this control will allow the map to take up the full screen.

Note: the full-screen control is not available in the app preview. Copy the URL from the app's top in the app preview and load it in a new window to see the full screen control.

Fullscreen Control Position

Expects type number.

The position of the Fullscreen control. 

  • 0 - Top Right
  • 1 - Top Left
  • 2 - Top Center
  • 3 - Top Right
  • 4 - Center-Left
  • 5 - Left Top (below Top Left)
  • 6 - Bottom Left
  • 7 - Top Right
  • 8 - Center Right
  • 9 - Bottom Right
  • 10 - Bottom Left
  • 11 -  Bottom Center
  • 12 - Right Bottom (below Bottom Right)
  • 13 - Center

Gesture Handling

Determines how the map handles gestures:

  • cooperative - the map will cooperate with the page gestures.
  • greedy - all touch gestures are sent to the map.
  • none - the map cannot be panned or zoomed by user gestures.
  • auto - the gesture handling is either cooperative or greedy depending on whether the map is on a scrollable page or iframe.

Keyboard Shortcuts

If checked, the map can be controlled by available keyboard shortcuts.

Map Type Control

If checked, displays the control at the top left of the map to allow the user to switch between different map types.

Map Type Id

Displays the starting map type id. If the Map Type Control is available, the user may change between the following map types:

  • hybrid - satellite map with roads drawn on top.
  • roadmap - a visual layout of the roads.
  • satellite - satellite pictures of the map.
  • terrain - a visual layout of the map with terrain markings for elevation.

Rotate Control

If checked, the rotate control will be visible on the map when applicable. This will only appear on maps that support oblique imagery. It will be hidden automatically if no 45° imagery is available.

Rotate Control Position

Expects type number.

The position of the Rotate control. 

  • 0 - Top Right
  • 1 - Top Left
  • 2 - Top Center
  • 3 - Top Right
  • 4 - Center-Left
  • 5 - Left Top (below Top Left)
  • 6 - Bottom Left
  • 7 - Top Right
  • 8 - Center Right
  • 9 - Bottom Right
  • 10 - Bottom Left
  • 11 -  Bottom Center
  • 12 - Right Bottom (below Bottom Right)
  • 13 - Center

Scale Control

If checked, a scale will be presented at the bottom of the map control.

Tilt

Expects type number.

The only allowed values are 0 or 45. This allows the angle of incidence of the map to shift to 45 degrees where available. 

Fit Bounds

If checked, the map will set the viewport to contain the marker bounds.

Zoom

Min Zoom

Expects type number.

A number value indicating the minimum zoom level for the map. Sattelite map zoom levels differ, but most zoom map zoom levels are between 0 and 18.

Max Zoom

Expects type number.

A number value indicating the maximum zoom level for the map. Sattelite map zoom levels differ, but most zoom map zoom levels are between 0 and 18.

Initial Zoom

Expects type number.

A number value indicating the initial zoom level for the map. Sattelite map zoom levels differ, but most zoom map zoom levels are between 0 and 18.

Zoom Control

If checked, a zoom control will be displayed on the map.

Zoom Control Position

Expects type number.

The position of the Zoom control. 

  • 0 - Top Right
  • 1 - Top Left
  • 2 - Top Center
  • 3 - Top Right
  • 4 - Center-Left
  • 5 - Left Top (below Top Left)
  • 6 - Bottom Left
  • 7 - Top Right
  • 8 - Center Right
  • 9 - Bottom Right
  • 10 - Bottom Left
  • 11 -  Bottom Center
  • 12 - Right Bottom (below Bottom Right)
  • 13 - Center

Directions

Markers

Expects type list.

An array of places to highlight on the map with visual markers. The format of each marker is:

  • latitude (required) - a number representing the latitude of the location.
  • longitude (required) - a number representing the longitude of the location.

Example:

[  
  {  
    "latitude": 37.4285713,  
    "longitude": -122.1455912  
  }  
]

Direction Markers

Expects type list.

A list of at least two point objects with a latitude and longitude. If provided and the Show Directions switch is enabled, the map will overlay a path from the first point to the last point in the list. Example:

[  
  {  
    "latitude": 37.396396,  
    "longitude": -121.942738  
  },  
  {  
    "latitude":37.4285713,  
    "longitude": -122.1455912  
  }  
]

The resulting control will look like this:

organizing info

Geocoded Center

Expects type place.

A Place object representing the center of the map. This is the closest place that the API can map to this location.

Center

Expects type place.

A different place object that represents the actual physical center. This differs from the Geocoded center in that if the user moves the map to a location that Google is unable to map, the center and the geocoded center will not be identical. In most cases, they are the same.

Find Geolocation

If checked, geolocation shows up in the map.

Marker Image

Expects type text.

A URL to an image to be used as the marker for the locations provided in the Markers box. Must be a URL to secure address (HTTPS).

Start Marker Image

Expects type text.

A URL to an image to be used as the marker for the locations provided in the first item in the Direction Markers box. Must be a URL to secure address (HTTPS).

Destination Marker Image

Expects type text.

A URL to an image to be used as the marker for the locations provided in the last item in the Direction Markers box. Must be a URL to secure address (HTTPS).

Show Directions

If checked, a route between the Direction Markers will be highlighted.

More

Aria Label

Expects type text.

The aria-label attribute is used to define a string that labels the current element. It is used to provide an accessible name for the control. For more information see here.

Location Marker

Expects type place.

A Place object representing the current location of the user.

Location Marker Image

Expects type text.

Image to be displayed at the current location marker. It must be a fully qualified URL.

Auto Update Location Marker

If checked, the location will continue to update as the user's location is updated to the browser.

Show Indicator

If checked, the location will have an indicator dot.

Indicator Color

Expects type text.

The color of the indicator dot for the location. This is a text string of any valid CSS color.

Background Color

Expects type text.

A color that defines the control's background that is displayed while the map control is being loaded.

Clickable Icons

If checked, the points of interest will be clickable. This is a Google map feature.

State

Is Visible

Expects type boolean.

If TRUE the Map will be visible. If FALSE the it will not be displayed. If the field is empty, the Map will be visible.

Is Disabled

Expects type boolean.

If TRUE the control will be disabled and the user will not be able to interact with it. If FALSE the control will be enabled. If the field is empty, the control will be enabled.

Style

Check Common style properties of web controls for details on how to style this Web Control.

Actions

Geocoded Center Changed

This event is triggered every time the map is moved, and the center is updated. The event.value will be a Place Variable Type with a formattedAddress, if one is available.

Center Changed

This event is triggered every time the map is moved, and the center is updated. The difference between the Geocoded center change and center change is that the Center is actually the visible center of the map. The Geocoded center is the closest geocoded point that the map can locate. This property does not contain the address.

Marker Changed

This event is triggered every time the user changes location, and the location is updated. The event.value will be a Place Variable Type.

Example

Add a Map Control to a Web Page. Set a couple of geocoded place markers in the Markers section. Turn on Show Directions in the Advanced options.

organizing info