AdvancedMarker mouse-over event

[JBravo69]

Hi, I am looking to override the default mouse over with some custom UI, we use the click and infoWindow for another feature but ned to display something similar in when mouse is over the AdvancedMarker.

no event is being fired on mouse over? is this supported?

[valentasm1]

I dont know. Pp say you need to add marker.addListener('click', ...) to be able add mouseever event. Have you tried that? https://stackoverflow.com/questions/76860379/google-maps-advancedmarker-hover-listener-function-not-working

If you find js example it mostly work here.

[JBravo69]

Hi,

We are setting the click listener and this works fine mose events are not firing.

Can you see what we are missing in this?

private async Task AddJobMarkers(List jobs) { if (!_mapReady || _map1 == null) return;

var jobCoordinates = jobs
    .Where(j => j.Latitude != 0 && j.Longitude != 0 && !j.IsPrePlaned)
    .Select((j, index) => new { Job = j, Coordinate = new LatLngLiteral { Lat = j.Latitude, Lng = j.Longitude }, Order = index + 1, Id = j.Id })
    .ToList();

var markers = jobCoordinates.ToDictionary(jc => jc.Job.Id, jc =>
{
    string color = jc.Job.IsUnplanned ? "orange" : (jc.Job.IsManuallyAllocated ? "red" : "blue");
    string etaText = "N/A";

    if (DateTime.TryParse(jc.Job.ETA, out DateTime eta))
    {
        etaText = eta.ToString("hh:mm tt");
    }

    return new AdvancedMarkerElementOptions()
        {
            Position = new LatLngLiteral() { Lng = jc.Coordinate.Lng, Lat = jc.Coordinate.Lat },
            Map = _map1.InteropObject,
            GmpDraggable = false,
            Content = @$"<div id='marker' data-bs-toggle='tooltip' data-bs-placement='top' data-bs-html='true' title='{jc.Job.CompanyName}'>{MapMarkerSvgs.CircleEmpty(color)}<div>"
        };
});

if (_jobMarkerElementList == null)
{
    _jobMarkerElementList = await AdvancedMarkerElementList.CreateAsync(_map1.JsRuntime, markers);

    foreach (var marker in _jobMarkerElementList.Markers)
    {
        var markerVal = marker.Value;
        var job = jobs.FirstOrDefault(j => j.Id == marker.Key);
        if (job != null && markerVal is not null)
        {
            await markerVal.AddListener<GoogleMapsComponents.Maps.MouseEvent>("click", async e =>
            {
                await OnMarkerClicked(e, markerVal, job);
                await e.Stop();
            });

            await markerVal.AddListener<GoogleMapsComponents.Maps.MouseEvent>("mouseenter", async e =>
            {
                await OnMarkerMouseOver(e, markerVal, job);
                await e.Stop();
            });
        }
    }
}
else
{
    await _jobMarkerElementList.AddMultipleAsync(markers);

    foreach (var marker in _jobMarkerElementList.Markers)
    {
        var markerVal = marker.Value;
        var job = jobs.FirstOrDefault(j => j.Id == marker.Key);
        if (job != null && markerVal is not null)
        {
            await markerVal.AddListener<GoogleMapsComponents.Maps.MouseEvent>("click", async e =>
            {
                await OnMarkerClicked(e, markerVal, job);
                await e.Stop();
            });

            await markerVal.AddListener<GoogleMapsComponents.Maps.MouseEvent>("mouseenter", async e =>
            {
                await OnMarkerMouseOver(e, markerVal, job);
                await e.Stop();
            });
        }
    }
}

}