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.01k stars 65 forks source link

Add className and style prop to the MapControl component #379

Open devnaumov opened 1 month ago

devnaumov commented 1 month ago

Target Use Case

Currently, the MapControl component does not support applying custom styles or classes, which limits its flexibility. We need the ability to add className and style props to this component to allow for custom styling. For example, we want to make the control take 100% of the container by using inset: 0px 0px auto 0px;

Proposal

Modify the MapControl component to accept className and style props.

usefulthink commented 1 month ago

Since the MapControl component is using the same portal logic that is used by AdvancedMarker or InfoWindows, this could be implemented in much the same way:

https://github.com/visgl/react-google-maps/blob/17504349be183a8710e0608d9863f33adfe225d0/src/components/advanced-marker.tsx#L126-L133

However, I'm not sure this would be especially useful given how the controls are meant to be used: They implement a layouting algorithm to allow for multiple independent controls to co-exist within a map-instance, partially overlaid on the map. If the element should have the full width of the container it would be easier to just add it as a sibling of Map-component.