visgl / visgl/react-google-maps
[Feat] Custom Info Window component
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.9k
- Forks
- 193
- Avg merge
- 3d 16h
- Merged PRs (30d)
- 13
Description
Target Use Case
The current infoWindow class doesn't allow for granular control over styling or even the close button. Having an infoWindow that can render a React.ReactNode (or even a static HTML element but the dev would have full control of it as opposed to what you get from infoWindow) would allow for making maps that look and feel much cleaner with the rest of the web app.
Proposal
I have implemented a Custom Info Window by extending the google.maps.Overlay class but I was only able to make it render static HTML elements, not React components. Maybe the use of React portals to render React components would work? I haven't tried it yet myself.
Or maybe this is the completely wrong approach and there's a better way of doing it.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reviewing the existing infoWindow class and the Google Maps Overlay approach described in the issue. Investigate whether React portals can render a React.ReactNode with control over styling and the close button. Done means a supported custom info window approach is defined and demonstrated with React content.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100