Allow React component as InfoWindow content

[sslash]

It seems that the content in the InfoWindow has to be a String.
However it would be nice to allow more complex UI's here, like a React component as the content.

[tomchentw]

Kind of interesting. What's your expected API ?

[tomchentw]

Since #32 is landed, currently the InfoWindow API would look like this:
<InfoWindow title="Blabla" onClick={this.handleClick} />

Combined with marker:

<Marker lat={lat} lng={lng}>
  <InfoWindow title="Blabla" onClick={this.handleClick}>
</Marker>

Proposed API for InfoWindow with React component:

<InfoWindow title="Blabla" onClick={this.handleClick}>
  <MyFancyReactComponent>
    <ItShouldAlsoSupportDiffAlgorithmHere />
  </MyFancyReactComponent>
</InfoWindow>

Is this what you want?

[wuct]

👍 This API is exactly what I want. But a content of InfoWindow is not in a react shadow DOMs tree, how will you implement this?

[metalmatze]

This would be exactly what I need. It's crucial for my application!

[tomchentw]

This can be implement by the following:

1. Create a detached DOM using document.createElement
2. Render the passed in child using React.render(React.Children.only(props.children), detachedDOM)
3. Pass the detachedDOM into InfoWindow({content: detachedDOM})

What do you guys think?

[wuct]

After passing the detachDOM to a InfoWindow, a InfoWindow will call setOptions to set the content internally. So the content of InfoWindow will remount into GoogleMaps DOM tree every time when the InfoWindow is update and won't utilize React diff right?

[tomchentw]

No. As long as the detachedDOM is the same instance, React will recognize it.

[metalmatze]

I know it's impolite to ask if anyone has implemented this feature, but I want to do it anyway since I would need this feature. Is there any progress? I'm just building my first app with react and I'm not quite sure if I could implement this feature myself. Sorry.

[tomchentw]

Released v2.0.0 and v2.0.1.

[ashishchoudhary12]

how to hide infow window close buttom???

[ashishchoudhary12]

how to hide infow window close buttom???

[sriniss13]

how to customize info window i can't change default style

[umair-khanzada]

what about the Marker, can we pass jsx element against marker's icon props ?