[SOLVED] Render a custom component using react-google-maps

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

...
   <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?

Solution

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.