GuidesReferenceChangelogVideosDiscord
Reference
Sign UpLogin

Map

Overview

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.

organizing info

Control Details

Markers

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

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

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

Center

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.

Map Type Control

Display the control at the top left of the map to allow the user to switch between different map types. See the Map Type Id for the different types.

Map Type Id

The starting map type id. If the Map Type Control is available, the user may change between different map types. The available types are:

  • 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.

Marker Image

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

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

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

When enabled, a route between the Direction Markers will be highlighted.

Location Marker

A Place object representing the current location of the user.

Location Marker Image

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

Auto Update Location Marker

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

Show Indicator

When enabled, the location will have an indicator dot.

Indicator Color

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

Background Color

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

Clickable Icons

This is a feature on a google map. A map icon represents a point of interest. If enabled, the points of interest will be clickable.

Disable Double Click Zoom

When this option is enabled, the user cannot zoom by double-clicking.

Fullscreen Control

If enabled, 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 fullscreen 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

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 enabled, the map can be controlled by available keyboard shortcuts.

Min Zoom

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

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

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.

Rotate Control

If enabled, the rotate control will be visible on the map.

Rotate Control Position

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 enabled, a scale will be presented at the bottom of the map control.

Tilt

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

Zoom Control

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

Zoom Control Position

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

Fit Bounds

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

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 1: A Simple Map control

organizing info

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.