react-google-maps icon indicating copy to clipboard operation
react-google-maps copied to clipboard

Add className and style prop to the MapControl component

Open devnaumov opened this issue 1 year ago • 3 comments

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.

devnaumov avatar May 22 '24 12:05 devnaumov

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.

usefulthink avatar May 22 '24 16:05 usefulthink

Any update on this? this won't be any bigger change I believe. This will help us to control the search input box

dikshantpatodia avatar Sep 28 '24 10:09 dikshantpatodia

I love to hear it!

This issue totally slipped my mind. Should be a good issue to get started with the dev-environment and such. Let me know if you need anything from us!

The AdvancedMarker implementation has changed a lot in the meantime, but the part I linked above could still be used as a template for adding the props to the MapControl

usefulthink avatar Jan 10 '25 22:01 usefulthink