Is there any way to put a image inside a marker on the google maps?

Question

I am using react-google-maps and want to use user's image inside marker. How can i put dynamic image inside a marker?

I tried using icon object of marker but it did not work because it just put a image on the map not inside a marker.

Something like this

Answer 1

You can pass Options props in Marker component and put your image src url in icon property. (Not tested but I think it will work for you)

Example

<GoogleMap
    defaultZoom={8}
    defaultCenter={{ lat: -34.397, lng: 150.644 }}
>
    <Marker           
        options={{ icon: { url: ...., scaledSize: ...., size: .... } }}
        position={{ lat: -34.397, lng: 150.644 }}
    />
</GoogleMap>

scaledSize : The size of the entire image after scaling, if any. Use this property to stretch/shrink an image or a sprite.

size : The display size of the sprite or image. When using sprites, you must specify the sprite size. If the size is not provided, it will be set when the image loads.