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

In case the above methods don't work, Try this

<MarkerF options={{
                        icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/parking_lot_maps.png'
                    }}
                     />

Answer 3

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,
    }}
/>