Add className and style prop to the MapControl component

[devnaumov]

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]

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:

react-google-maps/src/components/advanced-marker.tsx

Lines 126 to 133 in 1750434

	// update className and styles of marker.content element
	usePropBinding(contentContainer, 'className', className ?? '');
	useEffect(() => {
	if (!contentContainer) return;
	setValueForStyles(contentContainer, style || null, prevStyleRef.current);
	prevStyleRef.current = style || null;
	}, [contentContainer, className, style]);

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.

[dikshantpatodia]

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

[usefulthink]

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