In my Google Maps application, I have an InfoWindow that displays some of my HTML content created in React.
return (
<div className="map-tooltip-wrapper">
<div className="map-tooltip-image><img src={image || ''} /></div>
<div className="map-tooltip-title"><h5 dangerouslySetInnerHTML={{__html: unescape(title || '')}}></h5></div>
<div className="map-tooltip-message"><p dangerouslySetInnerHTML={{__html: unescape(message || '')}}></p></div>
</div>
)
Although I can style the wrapper and its contents, I am having trouble removing or hiding the highlighted area on screen.
How can I remove or hide this highlighted area?
https://i.sstatic.net/COhL6.png
My CSS is basic, and I don't mind keeping the vertical scrollbar. What concerns me is everything outside the designated area. However, I would like to keep the close X button and position it over the image to the left.
I attempted traversing up the DOM tree using jQuery starting from the map-tooltip-wrapper, but this solution relies heavily on the current structure which may change due to dynamic inline styles added by Google Maps rendering process in the future.
https://i.sstatic.net/dAtbT.png
To create the InfoWindow, I used the following code snippet:
this.mapInfoWindow = new google.maps.InfoWindow({
content: content
});
The documentation provided by Google lacks sufficient guidance.