Angular Google Map AdvancedMarker not clickable with custom content

I have a weird problem with AdvancedMarkers in angular google maps. I use "@angular/google-maps": "^19.1.2", and angular 19.

So, I have a map with clickable advanced markers and custom icons. There can be max. 1 active marker. The active marker is a bit bigger than the inactive ones and has a project name label.

This breaks when I call something like map.panTo(..) or map.setCenter(...) etc. to focus more on the active icon.

setFocusedMarker(projectId: string) {
this.currentExpandedProjectId = projectId;
this.map.panTo(this.projectMapInfos.find(p => p.projectId === projectId)!.position);
this.updateLabelsAndMarkers();
}

updateLabelsAndMarkers() {
this.projectMapInfos.forEach(project => {
project.icon = this.getIcon(project.projectId, project.name)
});
}

getIcon(projectId: string, projectName: string) {
const parser = new DOMParser();

if (this.currentExpandedProjectId === projectId) {
console.log("active again")
let container = document.createElement("div");
container.classList.add("marker-container");
container.style.position = "relative";
container.style.display = "flex";
container.style.flexDirection = "column";
container.style.alignItems = "center";

let label = document.createElement("div");
label.classList.add("marker-label");
label.innerText = projectName;
label.style.maxWidth = "250px";
label.style.whiteSpace = "nowrap";
label.style.position = "absolute";
label.style.top = "-30px";
label.style.left = "50%";
label.style.transform = "translateX(-50%)";
label.style.background = "grey";
label.style.color = "white";
label.style.padding = "4px 8px";
label.style.borderRadius = "4px";
label.style.fontSize = "12px";
label.style.fontWeight = "bold";

let iconSvg = parser.parseFromString(this.markerSelectedSvgString, "image/svg+xml").documentElement;

container.appendChild(label);
container.appendChild(iconSvg);

return container;
} else {

return parser.parseFromString(this.markerUnselectedSvgString, "image/svg+xml").documentElement;
}
}


When the page loads, all markers are inactive. The first click on a marker leads to a working panTo() and the active icon is shown with the label. However, subsequent clicks on the icon do not work. But on each click I can see the "active again" log statement in the console. When I interact with the map somehow (manually zooming, moving), the click on the icon works again.

Without the custom icon and the default markers it also works fine.

<google-map (mapInitialized)="onMapReady($event)" mapId="myMap" [zoom]="zoom"

="center" [options]="options"
width="100%" height="100%">

@for (project of projectMapInfos; track project.position) {
<map-advanced-marker (mapClick)="onMarkerClick(project.projectId, project.position)"
[position]="project.position"
[content]="getIcon(project.projectId, project.name)"
/>
}
</google-map>


Is there anything I am missing? Any hint is greatly appreciated.

Continue reading...​