React-google-maps: Custom Markers

[Karrsen]

Hey! I've gotten pretty into this stuff and first I would like to say awesome stuff. You guys are incredible. I'm still new and learning but you've made it all very clear. I was wondering how I could make each marker into a custom image? I am using the withGoogleMap version. Any ideas? Also, if it includes using the "src + API key thing" could you explain to me a bit? I don't know where to put it in my file. Thanks!

[oshalygin]

@Karrsen

Its a matter of passing down either the image(svg or otherwise) to the object through props. Here is an example:

const svg = `data:image/svg+xml;charset=UTF-8;base64,${base64EncodedSvg}`;

<Marker
  onClick={() => props.onClick(marker.workId)}
  icon={{
    url: svg, // pass your image here
    anchor: iconAnchor
  }}
  key={index}
  position={marker.location}
/>

For additional bathroom reading:
https://developers.google.com/maps/documentation/javascript/symbols
https://developers.google.com/maps/documentation/javascript/examples/marker-symbol-custom

[Karrsen]

Hey,
I've done all this and it works. Thank you, you've been a great help. Now I have just one last question. How do you make the custom marker scale like a normal marker? Whenever I zoom in or out the image keeps its size instead of zooming with the map. Thanks!

[oshalygin]

@Karrsen the marker size is static on purpose, thats how standard markers are implemented within the map.

If you wanted to keep it static you could use <OverlayView />

Closing for now :)

[aliaro428]

@oshalygin i have a question can we change the marker color dynamically ?

[JustFly1984]

@aliaro428
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@1.7.5

Enjoy!