search

visgl / react-google-maps

React components and hooks for the Google Maps JavaScript API
https://visgl.github.io/react-google-maps/
MIT License
1.31k stars 110 forks source link

[Bug]info windows for transit directions not styled correctly #593

Open jackiepapers opened 3 weeks ago

jackiepapers commented 3 weeks ago

Description

When rendering a transit directions route, the info windows for each leg segment have a strange styling.

Screenshot 2024-11-01 at 3 06 16 AM

Steps to Reproduce

Using the example code

Environment

Logs

No response

usefulthink commented 3 weeks ago

Can you share a link to the example you are referring to?

jackiepapers commented 3 weeks ago

I mean the example code provided but just change the mode to TRANSIT https://github.com/visgl/react-google-maps/tree/main/examples/directions

usefulthink commented 3 weeks ago

I did that, and this is what it looks like for me:

image

So I can't see the problem you’re seeing there. You could check with the devtools to see if there is any CSS from the site interfering with those info-windows. However, besides that there isn't a lot we can do about it, since all of the rendering is happening inside the DirectionsRenderer.\

Maybe we need to open an issue in the Google Maps Issue Tracker about this.

jackiepapers commented 3 weeks ago

I am using it in Next js. It seems there's an image that's styled with absolute and top: 19px. If I remove the top: 19px it looks right. <img alt="" src="https://maps.gstatic.com/mapfiles/tiph.png" draggable="false" style="user-select: none; border: 0px; padding: 0px; margin: 0px; position: absolute; right: -8px; top: 19px; width: 15px; height: 9px;" class="">

usefulthink commented 5 days ago

That's what I thought. But since we can't change how Google Maps renders these icon overlays, you can check which CSS rules from your application affect that image and remove them.