Anatomy
- Container: Area that displays a map
- Map/Satellite: Option to switch between the map and satellite views
- Map markers: Markers that represent assignments, workforce, and other key field service resources
- Full screen view: Expands the map size to full screen
- Street view: Switches the perspective to the Google street view
- Zoom in, zoom out: Magnification control for the frame containing the territory area
Subcomponents
See usage guidance for popover
Usage
The FSM Google map is used by field service members to visualize where resources like team members, crews, and tasks are located as well as routes where team members will be travelling to work. The component can also be used across different field service applications and workflows and displays in small or large areas of the user interface.
In this example, the FSM Google map takes most of the horizontal top area of the dispatcher workspace user interface.
In this example, the FSM Google map takes the right half area of the home user interface.
Variants
Learn about how to use the FSM Google map in your design.
Types
FSM Google map doesn’t have any specific types. However, the elements within FSM Google map have specific types.
Markers
The component provides 5 “out of the box” markers for single field agent, co-located field agent, co-located tasks, co-located agents and tasks, and task.
| Type | Example |
|---|---|
| Field agent |  |
| Crew |  |
| Co-located |  |
The single task marker contains a label that identifies the status of the task. Instead of the default color, these markers also use colors to help identify the status of tasks on the map.
| Task status | Example |
|---|---|
| Pending |  |
| Assigned |  |
| Accepted |  |
| On route |  |
| In progress |  |
| Paused |  |
| Closed |  |
| Completed |  |
| Other |  |
Popovers
Popovers allow users to surface key information and contextual actions for different objects represented on the map. See the usage guidelines for popover for details.
Work order task
A work order task is scheduled and assigned by the field service dispatcher for a field technician or a crew of technicians. Dispatchers can see in the dispatcher app how work order tasks are distributed across an area or territory. Work order tasks of different status are represented with different colors and labeled accordingly. When dispatchers select a work order task marker on the map. a popover opens with the task details.
In this example, the work order task marker is selected and the task popover shows the task details.
Field agent
Dispatchers are able to see their workforce distribution across the map and can identify individual technicians by their initials displayed in the marker. When dispatchers select a field technician marker on the map, a popover opens with the member’s details.
In this example, the field technician’s marker is selected and the popover shows the technician details.
Shared location marker
Shared location markers represent resources, field technicians, and tasks that share the same address. This is different from cluster markers that group individual markers based on proximity and zoom levels. When dispatchers select a shared location marker on the map, a popover opens with a list of links for all items in the location.
In this example, the shared location marker shows a list of all the field service technicians and work order tasks.
Routes
The FSM Google map works with routes for planning assignments and monitoring work. For example, a field dispatcher can select to see a field technician’s route for the day and the sequence of assigned tasks plotted along the route.
In this example, the purple route connects the field technician, MJ, to his assigned tasks.
Configurations
The FSM Google map can be configured through the available properties.
Default
Determines the territory area that is visible to the user once the page loads.
Street view
Enables or disables the Google map street view application.
Zoom
Determines the maximum and minimum zoom levels the user can experience.
Points of interest
Can be configured by following the Google Map styling guidelines.
Markers
The FSM Google map comes with its own “out of the box” markers.
Territory
Defines the coordinates of the total territory area available.
Design recommendations
Learn how to apply FSM Google map in your design.
UI text guidelines
These are some recommendations for using text within FSM Google map:
- Use sentence case for all titles, labels, and column headers
- Keep all text labels informative and short to increase readability and scanning
- Capitalize only the first letter and any proper nouns in a string of text
- Ensure content is contextual and specific to offer guidance and support to the user
- Use plain language and avoid slang, vague, or complex descriptions a user might misinterpret
Behavior
Learn how FSM Google map behaves when the display changes or a user interacts with the component.
States
Each marker type has 2 states: default and selected.
| Type | Default | Selected |
|---|---|---|
| Field agent |  |
 |
| Crew |  |
 |
| Co-located |  |
 |
The single task marker changes its color when the user selects it.
| Task status | Default | Selected |
|---|---|---|
| Pending |  |
 |
| Assigned |  |
 |
| Accepted |  |
 |
| On route |  |
 |
| In progress |  |
 |
| Paused |  |
 |
| Closed |  |
 |
| Completed |  |
 |
| Other |  |
 |
Responsive behaviors
The FSM Google map automatically resizes to fit the container.
Interactions
Learn how users interact with the FSM Google map.
Navigating the map
Users can navigate the FSM Google map by selecting and dragging the map. Users can zoom in and out of the map to adjust the area in view. Individual markers are grouped into cluster markers based on the zoom level.
In this example, nearby markers are grouped in cluster markers.
Usability
The FSM Google map complies with all internationalization and accessibility requirements.
Internationalization
When this component is used in a platform configured for a right-to-left (RTL) language, the popover content flips and aligns on the opposite side.
Accessibility
Learn how to access the actionable elements of FSM Google map through keyboard interactions and screen readers.
Keyboard interactions
You can access the actionable elements of FSM Google map with these keyboard keys:
- Tab
- Shift + Tab
- Enter or Space
- Esc
- Arrow keys
Screen readers
Google map has no specific screen reader considerations.