Custom content on marker component

[w3b-wiz4rd]

Hi! I'm trying to add some custom content inside the marker component, also tried to create a custom marker component following this tutorial: https://levelup.gitconnected.com/reactjs-google-maps-with-custom-marker-ece0c7d184c4, is actually for another library but I thought worked the same, turns out it doesn't.

Here's my implementation:

` <Marker icon={customIcon} position={{ lat, lng }}

{open && (

)}

Custom Component

`

So far, no luck, in this issue :https://github.com/fullstackreact/google-maps-react/issues/108 is a solution but is way to old, is there a solution on the original lib?

Thanks.

[JustFly1984]

@jesus-hernandezmoreno The repo of this project is unmaintained more than a year, and we had build new version https://www.npmjs.com/package/@react-google-maps/api

We had rewrite it to TypeScript, and updating it frequently: https://github.com/JustFly1984/react-google-maps-api/tree/master/packages/react-google-maps-api You can enjoy autocomplete.

You can see our docs: https://react-google-maps-api-docs.netlify.com/

Also a lot of examples: https://react-google-maps-api-gatsby-demo.netlify.com/ https://github.com/JustFly1984/react-google-maps-api/tree/master/packages/react-google-maps-api-gatsby-example/src/examples

The bundle size is much smaller: https://bundlephobia.com/result?p=@react-google-maps/api

Our Spectrum community: https://spectrum.chat/react-google-maps
Our Slack channel: https://join.slack.com/t/react-google-maps-api/shared_invite/enQtODc5ODU1NTY5MzQ4LTBiNTYzZmY1YmVjYzJhZThkMGU0YzUwZjJkNGJmYjk4YjQyYjZhMDk2YThlZGEzNDc0M2RhNjBmMWE4ZTJiMjQ

Enjoy!
 https://localhost:8000
AIzaSyAIEIUwCGFxj7LQoJP7f1uIjrdW_caZ5dg

http://localhost:3000
AIzaSyDGoMq24FaPFSVxKgMeXE5fkJw0JkdQ7i8

https://react-google-maps-api-gatsby-demo.netlify.com/ AIzaSyC3kkfcd1XTail_ft8YEoNto49NKOmFhWo

http://localhost:9001 AIzaSyCakXXwZ_CyPggaQBrYmbw5QhgGUcoMD_E

export const googleMapKey = 'AIzaSyCakXXwZ_CyPggaQBrYmbw5QhgGUcoMD_E' export default googleMapKey 
http://localhost:6060
AIzaSyCgkbHxXpGlShz9Doj6dhbnXR59v-G8bO0


[nandorojo]

@JustFly1984 I looked at the docs, and I don't see any answer to this question anywhere.

How do you render a custom component for a Marker? For example, Airbnb has custom markers with prices:

How can we achieve this with the Marker component? I don't see it documented anywhere.

Thanks!