googlemaps / js-api-loader

Load the Google Maps JavaScript API script dynamically.
Apache License 2.0
347 stars 64 forks source link

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

Closed rhanesoghlyan closed 7 months ago

rhanesoghlyan commented 9 months ago

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 commented 9 months ago

If you would like to upvote the priority of this issue, please comment below or react on the original post above with :+1: 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:

This is an automated message, feel free to ignore.

usefulthink commented 7 months ago

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