CODEWITHSUNDEEP
reactjsgoogle-mapsinfowindow
JoonT
JoonT

Reputation: 1236

Use React component in InfoWindow content

Currently I'm developing page with google-maps api.
I have a problem while implementing InfoWindow.
I wanna use React Component at content of InfoWindow like following.. 

const infoWindow = new google.maps.InfoWindow({
    content : <MyComponent />,
    position : { lat : ..., lng : ... }
})

infoWindow.open(map);

actually, I used renderToString like following 

const infoWindow = new google.maps.InfoWindow({
    content : renderToString(<MyComponent />),
    position : { lat : ..., lng : ... }
})

infoWindow.open(map);

It's pretty good. But I can't use any function in <MyComponent /> like lifecycle api..

So, Is there good way to use React Component in InfoWindow?

Upvotes: 3

Views: 2264

Answers (2)

Tetsuya3850
Tetsuya3850

Reputation: 1019

React Google Maps is an excellent library with great docs (https://tomchentw.github.io/react-google-maps/)

Upvotes: 0

JoonT
JoonT

Reputation: 1236

I solved like following, but I'm not sure and little bit wired... 

const myComponent = <MyComponent />;
const infoWindow = new google.maps.InfoWindow({
    content : renderToString(myComponent),
    position : { lat : ..., lng : ... }
})

infoWindow.open(map);

setTimeout(() => {
   ReactDOM.render(myComponent , $('.gm-style-iw > div > div').get(0));
}, 100);

Upvotes: 2

Related Questions