如何在@react-google-maps/api 中添加自定义 ico 或 SVG 作为标记图标

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