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

Question

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>;

...
   <GoogleMap
          mapContainerStyle={containerStyle}
          center={this.props.center}
          zoom={this.props.zoom}
        >

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

   </GoogleMap>
...

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?

It's possible to add custom components using the OverlayView component. Please see this [answer](https://stackoverflow.com/a/70609780/1100517) — user1100517, Jun 13 '22 at 21:24

score 0 · Accepted Answer · answered Feb 27 '21 at 14:43

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.

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

1 Answers1