Adding a Popover to the Markers in the Angular Map Component

Environment

Product

Progress® Kendo UI® for Angular Popover

Progress® Kendo UI® for Angular Map

Description

In a scenario where you have a Kendo UI for Angular Map component with markers, you might want to display additional information about the markers, much like Google Maps. This article aims to demonstrate how to integrate the Popover component to display additional information about the markers in the Kendo UI for Angular Map component.

Solution

To integrate the Kendo UI for Angular Popover component with the Kendo UI for Angular Map component markers, follow these steps:

1. Apply the kendoPopoverContainer directive to the outermost wrapping element of the map component.

html

<div kendoPopoverContainer>
	<kendo-map>
	</kendo-map>
</div>

2. Set the filter option of the kendoPopoverContainer directive and target the map markers class .k-marker.

html

<div kendoPopoverContainer [filter]="'.k-marker'">
	<kendo-map>
	</kendo-map>
</div>

3. (Optional) Use the Popover templates for content customization and choose which event triggers the Popover by setting the showOn property.

The following example demonstrates how to integrate the Kendo UI for Angular Popover component with the Kendo UI for Angular Map component markers.

Change Theme

Theme

Loading ...

Suggested Links

• Kendo UI for Angular Popover Component
• Kendo UI for Angular Popover Configuration
• Kendo UI for Angular Popover Templates
• Kendo UI for Angular Map Component
• Kendo UI for Angular Map Marker Layer