AdvancedMarker on mouseover event

[BParvatkar]

I am trying to add mouseover event on the AdvancedMarker component. However, only onClick and a few other events are supported. In my use case, I want to add two actions on the marker:

1. When I hover on the marker, show an InfoWindow.
2. When I click on the marker, perform another action.

One way that I am doing this is by adding a div inside AdvancedMarker and adding an onMouseOver event to that div.

[usefulthink]

You're bringing up a good point. I think the AdvancedMarkerElement (<gmp-advanced-marker>) from the maps API now supports all common DOM events via the usual addEventListener function. We don't have that here yet, so your workaround of adding events to the marker-content (you might need to set pointer-events:all; in css for that to work) is probably the way to go for now.

I'll add a ticket to address this.

[surjithctly]

The workaround won't work on some cases like I have to update the zIndex of AdvancedMarker on mouseHover. It seems not possible currently.

[isaacpresidium]

Can confirm that using pointer-events:all fixes this, but I'm getting an issue where the infobox inside the marker "flickers" from mouseenter and mouseexit events. Not sure how to fix this

[dw61]

Same request!

[PragramAllDay]

Same request.

[ewarrenG]

+1

[ewarrenG]

An example of this would be helpful here!

[tsabata]

I noticed the onMouseEnter and onMouseLeave functions for AdvancedMarker 3 days ago. Hopefully, we will have a release soon. 👍

[usefulthink]

I just released the 1.2.0 version containing the new AdvancedMarker implementation which now supports the enter/leave events.

[miltonarce]

Just to let you know, I'm using onMouseEnter and onMouseLeave and only works if you have onClick prop in your AdvancedMarker, if not nothing happend.

[antonio-pbilby]

Just to let you know, I'm using onMouseEnter and onMouseLeave and only works if you have onClick prop in your AdvancedMarker, if not nothing happend.

hi, I have opened a issue related to this: #542

[JonasRegener]

Workaround and a quick how to get it working.

This is our start. -> https://jsfiddle.net/gh/get/library/pure/googlemaps/js-samples/tree/master/dist/samples/advanced-markers-html/jsfiddle
Here u can see:

AdvancedMarkerElement.addListener("click", () => {
      toggleHighlight(AdvancedMarkerElement, property);
    });

function toggleHighlight(markerView, property) {
  if (markerView.content.classList.contains("highlight")) {
    markerView.content.classList.remove("highlight");
    markerView.zIndex = null;
  } else {
    markerView.content.classList.add("highlight");
    markerView.zIndex = 1;
  }
}

function buildContent(property) {
  const content = document.createElement("div");

  content.classList.add("property");
  content.innerHTML = `
    <div class="icon">
        <i aria-hidden="true" class="fa fa-icon fa-${property.type}" title="${property.type}"></i>
        <span class="fa-sr-only">${property.type}</span>
    </div>
    <div class="details">
        <div class="price">${property.price}</div>
        <div class="address">${property.address}</div>
        <div class="features">
        <div>
            <i aria-hidden="true" class="fa fa-bed fa-lg bed" title="bedroom"></i>
            <span class="fa-sr-only">bedroom</span>
            <span>${property.bed}</span>
        </div>
        <div>
            <i aria-hidden="true" class="fa fa-bath fa-lg bath" title="bathroom"></i>
            <span class="fa-sr-only">bathroom</span>
            <span>${property.bath}</span>
        </div>
        <div>
            <i aria-hidden="true" class="fa fa-ruler fa-lg size" title="size"></i>
            <span class="fa-sr-only">size</span>
            <span>${property.size} ft<sup>2</sup></span>
        </div>
        </div>
    </div>
    `;
  return content;
}

and in the css:

.property.highlight {
  background-color: #FFFFFF;
  border-radius: 8px;
  box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.2);
  height: 80px;
  padding: 8px 15px;
  width: auto;
}

.property.highlight::after {
  border-top: 9px solid #FFFFFF;
}

.property.highlight .details {
  display: flex;
}

.property.highlight .icon svg {
  width: 50px;
  height: 50px;
}

just change them to:

.property:hover {
  background-color: #FFFFFF;
  border-radius: 8px;
  box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.2);
  height: 80px;
  padding: 8px 15px;
  width: auto;
}

.property:hover::after {
  border-top: 9px solid #FFFFFF;
}

.property:hover .details {
  display: flex;
}

.property:hover .icon svg {
  width: 50px;
  height: 50px;
}

u just need to reverse the colors of the icons/infobox.

You can test this, you just need to put the new CSS into the JSfiddle i posted.

.property:hover {
  background-color: #FFFFFF;
  border-radius: 8px;
  box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.2);
  height: 80px;
  padding: 8px 15px;
  width: auto;
}

.property:hover::after {
  border-top: 9px solid #FFFFFF;
}

.property:hover .details {
  display: flex;
}

.property:hover .icon svg {
  width: 50px;
  height: 50px;
}

*Edits: cleaned up
Removed z-index, wasn't necessary