Skip to content

Render a custom component using react-google-maps – ReactJS

I want add a custom marker component to the map but I notice that using react-google-maps/api does not render custom components. As a simple example I used the following code:

const AnyReactComponent = ({ text }) => <div>{text}</div>;


          {<AnyReactComponent lat={38.26} lng={-7.61} text="My Marker" />}


It’s possible to do such things with this framework? Also, is possible to add buttons components to an infoBox or, rendering an options section when click on a marker?



Since the react-google-maps/api wrapped the google’s API so much, it seems that’s not likely. So, you’ll be limited to the package’s components, but I recommend it for simpler goals because there’s a lot of documentation available. Note that react-google-maps is no longer maintained, but this project is continued by react-google-maps/api.

User contributions licensed under: CC BY-SA
3 People found this is helpful