Fixed
Status Update
No update yet.
Comments
ca...@google.com
ca...@google.com
Yes please :) Along with a more specific definition of how the Popular Times are determined (how much history? done by mobile device activity? check ins?)
mi...@outlook.com
Making popular times available by day of the week would be awesome
ca...@google.com
It already is Jeffrey, you can toggle by day on mobile or desktop
ca...@google.com
We appreciate you waiting.
With the recent launch of the Maps JS Web Component, the AdvancedMarkerElement has been transformed into a Web Component where the default content is now slotted inside its shadow DOM. This architectural change means that the drop CSS animation style cannot directly affect the element as before.
Here is a solution:
- Create a
PinElementand append it to the light DOM of theAdvancedMarkerElement. This approach allows the CSS styles to work properly again.
We've updated our sample code to demonstrate this fix. Please review the updated example and let us know if you have any questions or need further assistance with implementation.
Description
----------------
What steps will reproduce the problem? Please provide a link to a
demonstration page if at all possible, or attach code.
1.
2. I narrowed it down to this function:
function createMarker(map, AdvancedMarkerElement) {
const advancedMarker = new AdvancedMarkerElement({
position:
{
lat: 46.8826694,
lng: -114.2319873,
},
map: map
});
const content = advancedMarker.content;
content.style.opacity = "0";
content.addEventListener("animationend", () => {
content.classList.remove("drop");
content.style.opacity = "1";
});
const time = 2 + Math.random(); // 2s delay for easy to see the animation
content.style.setProperty("--delay-time", time + "s");
intersectionObserver.observe(content);
}