Popups
Standalone popups that live on the map without a marker.
Standalone Popup
# Use ng-map-popup to display a popup at any location on the map. Unlike ng-marker-popup, standalone popups are not attached to markers and can be controlled programmatically: bind [(open)] to a signal and closing the popup (close button or map click) writes false back, while setting it to true opens it again. Popups are keyboard friendly: focus moves into the popup when it opens, and Esc closes it (the event is stopped, so a host dialog stays open). For popups that follow the hover, set [closeOnClick]="false" so a click does not dismiss them, and add className="ng-popup-passthrough" so the popup lets the pointer through to the map. Without it the cursor can move into the popup, the layer's mouseleave fires and the popup disappears.
import { Component, signal } from '@angular/core';
import { MapComponent, MapPopupComponent } from 'ng-mapcn';
@Component({
selector: 'app-standalone-popup',
standalone: true,
imports: [MapComponent, MapPopupComponent],
template: `
<div class="relative h-[420px]">
<ng-map [center]="[-74.006, 40.7128]" [zoom]="13">
<ng-map-popup
[longitude]="-74.006"
[latitude]="40.7128"
[closeButton]="true"
[(open)]="showPopup"
>
<div class="space-y-2">
<h3 class="font-semibold">New York City</h3>
<p class="text-muted-foreground text-sm">
The city that never sleeps. Population: 8.3 million
</p>
<button
type="button"
(click)="showPopup.set(false)"
class="hover:bg-accent w-full rounded-md border px-3 py-1.5 text-sm font-medium"
>
Close
</button>
</div>
</ng-map-popup>
</ng-map>
@if (!showPopup()) {
<button
type="button"
(click)="showPopup.set(true)"
class="bg-primary text-primary-foreground absolute bottom-4 left-4 z-10 rounded-md px-3 py-1.5 text-sm font-medium"
>
Show Popup
</button>
}
</div>
`,
})
export class StandalonePopupComponent {
readonly showPopup = signal(true);
}