'How to style the React google map marker using the given image file

Now I am using React-google-map component and want to change the marker to my own image. At this moment, I can't change the size of the marker using CSS. I've tried as follows:

var image = {
    url: '../images/icons/yellow.png',
    size: 10
};

return (
    <Marker 
        position={location}
        icon={image}
        onClick={this.handleMarkerClick.bind(this, marker)}
    />
    );

If you know the solution, please kindly let me know.

Thanks for your help in advance.

cssreactjs


Solution 1:[1]

You have to pass a url of the image, like: icon={url}

Example:

return (
    <Marker 
    position={location}
    icon={"http://maps.google.com/mapfiles/ms/icons/blue.png"}
    />
);

For more info: github.com/tomchentw/react-google-maps/issues/486

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 hkiame

Related Questions