Can I put react component as a content of the InfoWindow?

[rhanesoghlyan]

Hello @googlemaps/js-api-loader Support Team,

I hope this message finds you well. I'm currently working on a project that utilizes the @googlemaps/js-api-loader, and I have a question regarding the usage of React components as content within an InfoWindow.

Question:
Is it possible to use a React component as the content of an InfoWindow in @googlemaps/js-api-loader? I am aiming to display more dynamic and interactive information within the InfoWindow by utilizing React components.

Additional Context:
I have a Google Map integrated into my NextJS application using the @googlemaps/js-api-loader. While working on this project, I want to enhance the user experience by incorporating React components as the content of InfoWindows associated with map markers.

I appreciate your time and assistance in clarifying this matter. Thank you for maintaining such a valuable library, and I look forward to your response.

[wangela]

If you would like to upvote the priority of this issue, please comment below or react on the original post above with 👍 so we can see what is popular when we triage.

@rhanesoghlyan Thank you for opening this issue. 🙏
Please check out these other resources that might help you get to a resolution in the meantime:

• Check the issue tracker - bugs and feature requests for Google Maps Platform APIs and SDKs
• Open a support case - Get 1:1 support in Cloud Console.
• Discord - chat with other developers
• StackOverflow - use the google-maps tag

This is an automated message, feel free to ignore.

[usefulthink]

This package doesn't have any relation to react, it only provides the code needed to load the Google Maps API. So there's nothing that would prevent you from doing that. The only thing to keep in mind is that the google.maps.InfoWindow class will not be available when your page first renders.

You can see a working implementation of react-components being rendered into an infowindow here: https://github.com/visgl/react-google-maps/blob/main/src/components/info-window.tsx