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.14k stars 84 forks source link

[Feat] Close button component in info window #446

Open fschroiff opened 1 month ago

fschroiff commented 1 month ago

Target Use Case

I'd like to be able to translate and style the close button.

Proposal

Maybe a prop on the InfoWindow component where I could add a new component for the button?

usefulthink commented 1 month ago

This is available: when using the Maps JavaScript API beta-version, you can set headerDisabled={true} on the InfoWindow component and provide your own content including a close button. (see https://visgl.github.io/react-google-maps/docs/api-reference/components/info-window#headerdisabled-boolean)

fschroiff commented 1 month ago

I'm not sure what kind of ramifications using a "beta" version of the API in a production environment has...

usefulthink commented 1 month ago

Understood. But without those API features there's very little we can do. You could probably add some styles to hide the default close-button and add your own in the content, but that's not officially supported (however, I think the gm-style-iw classes on the DOM-elements created by the maps API haven't changed in years). Another alternative would be to use the AdvancedMarker component to create a custom info window.

I would expect these features to be promoted to generally available in a month or two, I can try to get a more definitive answer on that.