Skip to main content
Version: 8.3

Perspective - Google Map

Component Palette Icon:

Description

The Google Map component provides a new interactive map option to the Map component. The Google Map component is based on the LeafletJS plugin to use Google maps basemaps and allows scriptable interactions and various layer configurations including traffic, polygons, markers, and overlays.

caution

A Google Map API Key is required to be entered in the new googleMapsApiKey session prop to provide a functional map without a Development Mode watermark. This API key will be exposed on the web application, so it is recommended to add restrictions following Google's API Security Best Practices.

Properties

Most Properties have binding options. For more information on Bindings, see Types of Bindings in Perspective. This section only documents the Props Category of properties. The other Categories are described on the Perspective Component Properties page.

NameDescriptionProperty Type
initThe map's initial state on load.
  • center: Initial geographic center of the map.
    • lat: Latitudinal coordinate. Default value is 38.660867.
    • lng: Longitudinal coordinate. Default value is -121.159728.
  • zoom: Initial map zoom level. Default is 13.
object
backgroundColorColor used for the background of the map when the tiles have not yet loaded as the user pans.value: string
clickableIconsAllow map icons to be clickable. These icons are also known as points of interest (POI) and represent areas like parks, schools, and shops . Default is true.value: boolean
cursorCursor related configuration.
  • draggable: The name or URL of the cursor to display when mousing over a draggable map. This property uses the CSS cursor attribute to change the icon. As with the CSS property, you must specify at least one fallback cursor that is not a URL. Value is string.
  • dragging: The name or URL of the cursor to display when the map is being dragged. This property uses the CSS cursor attribute to change the icon. As with the CSS property, you must specify at least one fallback cursor that is not a URL. Value is string.
object
controlSizeSize in pixels of the controls appearing on the map.value: numeric
disableDefaultUIEnables/Disables all default UI buttons. May be overridden individually. Does not disable the keyboard controls, which are separately controlled by the keyboardShortcuts property. Does not disable gesture controls, which are separately controlled by the gestureHandling property.value: boolean
fullscreenFullscreen related configuration.
  • controls: Enabled/Disabled state of the Fullscreen control. Default is enabled. Value is boolean.
  • controlPosition: Control display position. Default is top_left. Value is string.
object
gestureHandlingControls how the map handles gestures. Options include cooperative, greedy, auto, and none. Default is set to auto.value: string
headingThe heading for aerial imagery in degrees measured clockwise from cardinal direction North.value: numeric
isFractionalZoomEnabledWhether the map should allow fractional zoom levels.value: boolean
keyboardShortcutsAllows the map to be controlled by the keyboard when set to true.value: boolean
layersMap layers configuration. See the Layers section below for more detail on the available map layers.object
mapIDThe Map ID of the map.value: string
mapTypeMapType related configuration.
  • id:The initial Map mapTypeId. Value is string.
  • controls: The initial enabled/disabled state of the map type control. Value is boolean.
  • controlPosition: Control display position. Default is top_left. Value is string.
  • controlMapTypeIds: IDs of map types to show in the control.
  • controlStyle: Style of map type control to display. Value is string.
object
restrictionDefines a boundary that restricts the area of the map accessible to users. When set, a user can only pan and zoom while the camera view stays inside the limits of the boundary.
  • bounds: When set, a user can only pan and zoom inside the given bounds. Bounds can restrict both longitude and latitude, or can restrict latitude only. For latitude-only bounds, use west and east longitudes of -180 and 180, respectively. For example: north: northLat, south: southLat, west: -180, east: 180.
    • north: Latitude for Northern boundary. Value is string.
    • east: Longitude for the Eastern boundary. Value is string.
    • south: Latitude for the Southern boundary. Value is string.
    • west: Longitude for the Western boundary. Value is string.
  • strict: Bounds can be made more restrictive by setting the strictBounds flag to true. This reduces how far a user can zoom out, ensuring that everything outside of the restricted bounds stays hidden. The default is false, meaning that a user can zoom out until the entire bounded area is in view, possibly including areas outside the bounded area. Value is boolean.
object
rotateRotate related configuration.
  • controls: Enabled/Disabled state of the Rotate control. Default is enabled. Value is boolean.
  • controlPosition: Control display position. Default is top_left. Value is string.
object
scaleScale related configuration.
  • controls: Enabled/Disabled state of the Scale control. Default is enabled. Value is boolean.
object
tiltControls the automatic switching behavior for the angle of incidence of the map. The only allowed values are 0 and 45.value: numeric
zoomZoom related configuration.
  • controls: Enabled/Disabled state of the Zoom control. Default is enabled. Value is boolean.
  • controlPosition: Control display position. Default is top_left. Value is string.
  • max: The maximum zoom level which will be displayed on the map. Value is numeric.
  • min: The minimum zoom level which will be displayed on the map. Value is numeric.
object
styleSets a style for this component. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.object

Layers Properties

overlayView

Renders instances of Perspective views within the active project.

NameDescriptionProperty Type
nameA unique name which is used to distinguish this element from others. This name is provided to any applicable interaction event handlers, such as click handlers.value: string
enabledEnable/disable rendering of the OverlayView layer.value: boolean
mapPaneNameMap pane in which to render the OverlayView. Options include floatPane, mapPane, markerLayer, overlayLayer, overlayMouseTarget.value: string
boundsSets the bounds of the overlay. Either of bounds or position are required.
  • corner1: South-West corner of the overlayView.
    • lat: Latitudinal coordinate. Value is numeric.
    • lng: Longitude coordinate. Value is numeric.
  • corner2: North-East corner of the overlayView.
    • lat: Latitudinal coordinate. Value is numeric.
    • lng: Longitude coordinate. Value is numeric.
object
positionOverlayView position. Either of bounds or positions are required.object
viewsOverlayView instance configuration.
  • path: Path to the view instance. Value is string.
  • params: Params to pass to the view instance.
  • properties: Properties of this element. These are provided to any applicable interaction event handlers, such as click handlers.
  • style: Sets a style for the selected view. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.
object
transparentBackgroundIf enabled, disables the default background color.value: boolean
shadowIf enabled, apply a box shadow around the view.value: boolean
zIndexThe z-index of the layer.value: numeric
propertiesProperties of this element. These are provided to any applicable interaction event handlers, such as click handlers.object
styleSets a style for this overlayView layer. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.object

groundOverlay

Binds and scales an image to fit projected ground coordinates.

NameDescriptionProperty Type
nameA unique name which is used to distinguish this element from others. This name is provided to any applicable interaction event handlers, such as click handlers.value: string
enabledEnable/disable rendering of GroundOverlay layer.value: boolean
overlaysOverlay related configuration.
  • source: The URL of the image to display. Value is string.
  • bounds: Sets the bounds of the GroundOverlay.
    • corner1: South-West corner of the GroundOverlay, set using lat and lng properties.
    • corner2: North-East corner of the GroundOverlay, set using lat and lng properties.
  • properties: Properties of this element. These are provided to any applicable interaction event handlers, such as click handlers.
object
clickableIf true, the ground overlay can receive mouse events.value: boolean
opacityThe opacity of the overlay, expressed as a number between 0 and 1. Optional.value: numeric
propertiesProperties of this element. These are provided to any applicable interaction event handlers, such as click handlers.object

marker

A marker identifies a location on a map. By default, a marker uses a standard image. Markers can display custom images.

NameDescriptionProperty Type
nameA unique name which is used to distinguish this element from others. This name is provided to any applicable interaction event handlers, such as click handlers.value: string
enabledEnable/disable rendering of the marker layer.value: boolean
visibleIf true, the marker is visible.value: boolean
markersMarker related configuration.
  • position: Marker position configuration.
    • lat: Latitudinal coordinate. Value is numeric.
    • lng: Longitude coordinate. Value is numeric.
  • icon: Marker icon configuration.
    • type: The icon type used as to represent the marker. Options include default, image, and symbol. Value is string.
  • popup: If enabled, configured popups can be made visible for this marker. Popups do not apply to clusters.
  • tooltip: If enabled, configured tooltips can be made visible for this marker. Tooltips do not apply to clusters.
  • properties: Properties of this element. These are provided to any applicable interaction event handlers, such as click handlers.
object
clusterMarkersEnables marker clustering.value: boolean
animationStarts an animation. Any ongoing animation will be cancelled. Passing in null will cause any animation to stop. Default options include none, bounce, and drop.value: string
clickableIf true, the marker receives mouse and touch events.value: boolean
crossOnDragIf false, disables cross that appears beneath the marker when dragging.value: boolean
cursorMouse cursor to show on hover.value: string
draggableIf true, the marker can be dragged.value: boolean
iconMarker icon configuration.
  • type: Selects shape configuration. Options include default, image, and symbol. Value is string.
object
labelAdds a label to the marker.value: string
opacityThe marker's opacity between 0.0 and 1.0.value: numeric
optimizedOptimization enhances performance by rendering many markers as a single static element. This is useful in cases where a large number of markers is required.value: boolean
popupIf enabled, popup configuration for this marker. Popups do not apply to clusters.
  • enabled: Enable marker popup. Value is boolean.
  • visible: If true, the popup is visible. Value is boolean.
  • content: The popup content to display.
    • text: Text to display. Value is numeric.
    • view: A view to display as popup content. If configured, overrides the text property.
      • path: Path of view to display. Value is string.
      • params: Parameters for the view. If passing parameters into the embedded view, the names here must match the parameters on that view.
  • autoClose: Set it to false if you want to override the default behavior of the popup closing when another popup is opened. Value is boolean.
  • width: Width of the popup. Min and Max values allowed.
  • disableAutoPan: Disable panning the map to make the popup fully visible when it opens. Value is boolean.
  • pixelOffset: The offset, in pixels, of the tip of the popup from the x and y points on the map at whose geographical coordinates the popup is anchored.
  • arialLabel: AriaLabel to assign to the popup. Value is string.
  • zIndex: All popups are displayed on the map in order of their z-index, with higher values displaying in front of popups with lower values. By default, popups are displayed according to their latitude, with popups of lower latitudes appearing in front of popups at higher latitudes. Popups are always displayed in front of markers. Value is numeric.
  • style: Sets a style for the popup. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.
object
tooltipIf enabled, tooltips can be configured for this marker. Tooltips do not apply to clusters.
  • enabled: Enable marker tooltip. Value is boolean.
  • content: The tooltip content to display.
    • text: Text to display. Value is numeric.
    • view: A view to display as tooltip content. If configured, overrides the text property.
      • path: Path of view to display. Value is string.
      • params: Parameters for the view. If passing parameters into the embedded view, the names here must match the parameters on that view.
  • direction: Direction where to open the tooltip. Possible values are right, left, top, bottom, center, and auto. Auto will dynamically switch between right and left according to the tooltip position on the map. Value is string.
  • pixelOffset: The offset, in pixels, of the tooltip from the marker's position. For tooltips configured with auto direction, positive offsets move the tooltip away from the marker's position.
  • permanent: If true, the tooltip will display permanently, instead of only on mouseover. Value is boolean.
  • style: Sets a style for the tooltip. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.
object
shapeImage map region definition used for drag/click.
  • type: Selects shape configuration. Options include none, circle, poly, rec. Value is string.
object
titleRollover text.value: string
zIndexThe z-index of the layer.value: numeric
propertiesProperties of this element. These are provided to any applicable interaction event handlers, such as click handlers.object

circle

An array of circle layers.

NameDescriptionProperty Type
nameA unique name which is used to distinguish this element from others. This name is provided to any applicable interaction event handlers, such as click handlers.value: string
enabledEnable/disable rendering of the circle layer.value: boolean
visibleIf true, the circle is visible.value: boolean
circlesSets the center of the circle.
  • center: Circle center configuration.
    • lat: Latitudinal coordinate. Value is numeric.
    • lng: Longitude coordinate. Value is numeric.
  • fill: Circle fill configuration. Default properties include enabled, color, and opacity.
  • stroke: Stroke configuration. Default properties include enabled, color, opacity, position, and weight.
  • properties: Properties of this element. These are provided to any applicable interaction event handlers, such as click handlers.
object
radiusSets the radius of this circle in meters.value: numeric
clickableIndicates whether this circle handles mouse events.value: boolean
draggableIf set to true, the user can drag this circle over the map.value: boolean
editableIf set to true, the user can edit this circle by dragging the control points shown at the center and around the circumference of the circle.value: boolean
fillCircle fill configuration. Default properties include enabled, color, and opacity.object
strokeStroke configuration. Default properties include enabled, color, opacity, position, and weight.object
zIndexThe z-index compared to other polys.value: string
propertiesProperties of this element. These are provided to any applicable interaction event handlers, such as click handlers.object

polygon

Allows the map to draw arbitrary shapes at specified coordinates. An array of polygon layers.

NameDescriptionProperty Type
nameA unique name which is used to distinguish this element from others. This name is provided to any applicable interaction event handlers, such as click handlers.value: string
enabledEnable/disable rendering of the polygon layer.value: boolean
visibleIf true, the polygon is visible.value: boolean
polygons
  • points: Sets the path for this polygon. The ordered sequence of coordinates that designates a closed loop. Unlike polylines, a polygon may consist of one or more paths. As a result, the paths property may specify one or more arrays of LatLng coordinates. Paths are closed automatically.
    • lat: Latitudinal coordinate. Value is numeric.
    • lng: Longitude coordinate. Value is numeric.
  • fill: Polygon fill configuration. Default properties include enabled, color, and opacity.
  • stroke: Stroke configuration. Default properties include enabled, color, opacity, position, and weight.
  • properties: The z-index compared to other polys. Value is string.
object
clickableIndicates whether this polygon handles mouse events.value: boolean
draggableIf set to true, the user can drag this polygon over the map.value: boolean
editableIf set to true, the user can edit this polygon by dragging the control points shown at the center and around the circumference of the circle.value: boolean
fillPolygon fill configuration. Default properties include enabled, color, and opacity.object
geodesicWhen true, edges of the polygon are interpreted as geodesic and will follow the curvature of the Earth. When false, edges of the polygon are rendered as straight lines in screen space. Note that the shape of a geodesic polygon may appear to change when dragged, as the dimensions are maintained relative to the surface of the Earth.value: boolean
strokeStroke configuration. Default properties include enabled, color, opacity, position, and weight.object
zIndexThe z-index compared to other polys.value: string
propertiesProperties of this element. These are provided to any applicable interaction event handlers, such as click handlers.object

polyline

An array of polyline layers.

NameDescriptionProperty Type
nameA unique name which is used to distinguish this element from others. This name is provided to any applicable interaction event handlers, such as click handlers.value: string
enabledEnable/disable rendering of the polyline layer.value: boolean
visibleIf true, the polyline is visible.value: boolean
polylines
  • points: Sets the path for this polyline. The ordered sequence of coordinates of the Polyline. This path may be specified using either a simple array of LatLngs, or an MVCArray of LatLngs. Note that if you pass a simple array, it will be converted to an MVCArray. Inserting or removing LatLngs in the MVCArray will automatically update the polyline on the map.
    • lat: Latitudinal coordinate. Value is numeric.
    • lng: Longitude coordinate. Value is numeric.
  • icons: The icons to be rendered along the polyline. See the table below for related child properties.
  • stroke: Stroke configuration. Default properties include enabled, color, opacity, position, and weight.
  • properties: Properties of this element. These are provided to any applicable interaction event handlers, such as click handlers.
object
clickableIndicates whether this polyline handles mouse events.value: boolean
draggableIf set to true, the user can drag this polyline over the map.value: boolean
editableIf set to true, the user can edit this polyline by dragging the control points shown.value: boolean
geodesicWhen true, edges of the polygon are interpreted as geodesic and will follow the curvature of the Earth. When false, edges of the polygone are rendered as straight lines in screen space. Note that the shape of a geodesic polygon may appear to change when dragged, as the dimensions are maintained relative to the surface of the Earth.value: boolean
strokeStroke configuration. Default properties include enabled, color, opacity, position, and weight.object
zIndexThe zIndex compared to other polys.value: string
propertiesProperties of this element. These are provided to any applicable interaction event handlers, such as click handlers.object

polyline.polylines.icon Properties

NameDescriptionProperty Type
pathThe symbol's path, which is a built-in symbol path, or a custom path expressed using SVG path notation.value: string
anchorThe position of the symbol relative to the polyline. The coordinates of the symbol's path are translated left and up by the anchor's x and y coordinates respectively.object
fillIcon fill configuration. Default properties include enabled, color, and opacity.object
rotationThe angle by which to rotate the symbol, expressed clockwise in degrees. A symbol in an IconSequence where fixedRotation is false is rotated relative to the angle of the edge on which it lies.value: numeric
scaleThe amount by which the symbol is scaled in size. Defaults to the stroke weight of the polyline. After scaling, the symbol must lie inside a square 22 pixels in size centered at the symbol's anchor.value: string
strokeIcon stroke configuration. Default properties include enabled, color, opacity, position, and weight.object

rectangle

An array of rectangle layers.

NameDescriptionProperty Type
nameA unique name which is used to distinguish this element from others. This name is provided to any applicable interaction event handlers, such as click handlers.value: string
enabledEnable/disable rendering of the rectangle layer.value: boolean
visibleIf true, the rectangle is visible.value: boolean
rectanglesSets rectangle configuration.
  • bounds: Sets the bounds of the rectangle.
    • corner1: South-West corner of the rectangle, set using lat and lng properties.
    • corner2: North-East corner of the rectangle, set using lat and lng properties.
  • fill: Rectangle fill configuration. Default properties include enabled, color, and opacity.
  • stroke: Stroke configuration. Default properties include enabled, color, opacity, position, and weight.
  • properties: Properties of this element. These are provided to any applicable interaction event handlers, such as click handlers.
object
clickableIndicates whether this rectangle handles mouse events.value: boolean
draggableIf set to true, the user can drag this rectangle over the map.value: boolean
editableIf set to true, the user can edit this rectangle by dragging the control points shown.value: boolean
fillRectangle fill configuration. Default properties include enabled, color, and opacity.object
strokeStroke configuration. Default properties include enabled, color, opacity, position, and weight.object
zIndexThe z-index compared to other polys.value: string
propertiesProperties of this element. These are provided to any applicable interaction event handlers, such as click handlers.object

bicycling

Shows bicycle route information.

NameDescriptionProperty Type
nameA unique name which is used to distinguish this element from others. This name is provided to any applicable interaction event handlers, such as click handlers.value: string
enabledIf true, displays bike lanes and paths and demotes large roads.value: boolean
propertiesProperties of this element. These are provided to any applicable interaction event handlers, such as click handlers.object

traffic

Shows traffic information.

NameDescriptionProperty Type
nameA unique name which is used to distinguish this element from others. This name is provided to any applicable interaction event handlers, such as click handlers.value: string
enabledIf true, displays current road traffic.value: boolean
autoRefreshWhether the traffic layer refreshes with updated information automatically.value: boolean
propertiesProperties of this element. These are provided to any applicable interaction event handlers, such as click handlers.object

transit

Shows transit information.

NameDescriptionProperty Type
nameA unique name which is used to distinguish this element from others. This name is provided to any applicable interaction event handlers, such as click handlers.value: string
enabledIf true, enables layer that displays transit lines.value: boolean
propertiesProperties of this element. These are provided to any applicable interaction event handlers, such as click handlers.object

kml

Keyhole Markup Language (KML) configuration to specify a set of geographic visualizations.

NameDescriptionProperty Type
nameA unique name which is used to distinguish this element from others. This name is provided to any applicable interaction event handlers, such as click handlers.value: string
enabledEnable/disable rendering of a KML layer.value: boolean
urlThe URL of the KML document to displayobject
clickableIf true, the layer receives mouse eventsvalue: boolean
preserveViewportIf this option is set to true or if the map's center and zoom were never set, the input map is centered and zoomed to the bounding box of the contents of the layer.value: boolean
screenOverlaysWhether to render the screen overlays.value: boolean
suppressInfoWindowsSuppress the rendering of info windows when layer features are clicked. Default is null.value: string
zIndexThe z-index of the layer. Default is null.value: numeric
propertiesProperties of this element. These are provided to any applicable interaction event handlers, such as click handlers.object

Scripting

See the Perspective - Google Map Scripting page for the full list of scripting functions available for this component.

Example

The example below incorporates multiple layers to display bike paths and mark a location at the center of an editable circle using layers.

Properties

  • layers.marker.0: Default marker icon

    PropertyValue
    markers.0.position.lat38.660867
    markers.0.position.lng-121.159728
    markers.0.icon.typedefault
  • layers.circle.0: Red circle layer centered at the marker icon location

    PropertyValue
    circles.0.center.lat38.660867
    circles.0.center.lng-121.159728
    circles.0.fill#FF0000
    radius300
  • layers.bicycling: Visible bicycle routes

    PropertyValue
    enabledtrue