How to add custom ico or SVG as marker icon in @react-google-maps/api

Question

I am using @react-google-maps/api to show Google Map in my React Web application. Following their documentation I have added the marker as follows.

        <Marker
            onLoad={onLoad}
            position={location}
            
            icon={{
                // path: google.maps.SymbolPath.CIRCLE,
                url:'./../../assets/svg/location_marker.svg',
                scale: 7,
            }}
        />

But it seems to be not working. There are no markers displayed. using google.maps.SymbolPath.CIRCLE as path will show the marker icon. Did anyone face this issue before? any ideas?

Answer 1

Added require and solved the issue.

    <Marker
        onLoad={onLoad}
        position={deliveryDestination}
        icon={{
            // path: google.maps.SymbolPath.CIRCLE,
            url: (require('./../../assets/svg/location_marker.ico')),
            fillColor: '#EB00FF',
            scale: 7,
        }}
    />

Answer 2

If you are using .svg you have to add .default

Source: https://stackoverflow.com/a/70964618/6505257

<MarkerF
    position={deliveryDestination}
    icon={{
        url: require('./../../assets/svg/location_marker.svg').default,
    }}
/>