Skip to main content
Version: 8.1

Perspective - Google Map

New in 8.1.33

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 interstering 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