how to change marker icon by button in react google maps

[phoon0901]

I successfully create marker by different icon. After the rendering, all the marker showed in correct icon. However, how to change marker icon by button ? For example, I have 3 marker with different icon in first rendering. How to change it to same icon when I click a button?

This is my marker component.

 import React, {Component} from 'react';
import { Marker, InfoWindow } from "react-google-maps";

class MarkerInfo extends Component {

constructor(props){
    super(props);

    this.state = {
        isOpen: false
    }

}

handleToggleOpen = () => {
    if(this.state.isOpen){
        this.setState({
            isOpen: false
        });
    }else{
        this.setState({
            isOpen: true
        });
    }

}

handleToggleClose = () => {
    this.setState({
        isOpen: false
    });
}
render() {
console.log("markerinfo");
console.log(this);
return (
        <Marker
            position={{ lat: this.props.position.lat, lng: this.props.position.lng}}
            draggable= {false}
            label={this.props.label}
            onClick={() => this.handleToggleOpen()}
            icon={{url: this.props.icon.url  ,
                labelOrigin: this.props.icon.labelOrigin,
                }}
        zIndex= {this.props.zIndex}
        >

        {
            this.state.isOpen &&
         <InfoWindow onCloseClick={this.handleToggleOpen}>
             {this.props.info}
         </InfoWindow>
        }

        </Marker>

    )
}
}

export default MarkerInfo;

so the icon={{url: this.props.icon.url , labelOrigin: this.props.icon.labelOrigin, }} will load different icon from initiation. I want to change the icon after a button clicked.

[JustFly1984]

@phoon0901 The repo of this project is unmaintained more than a year, and we had build new version https://www.npmjs.com/package/@react-google-maps/api

We had rewrite it to TypeScript, and updating it frequently: https://github.com/JustFly1984/react-google-maps-api/tree/master/packages/react-google-maps-api You can enjoy autocomplete.

You can see our docs: https://react-google-maps-api-docs.netlify.com/

Also a lot of examples: https://react-google-maps-api-gatsby-demo.netlify.com/ https://github.com/JustFly1984/react-google-maps-api/tree/master/packages/react-google-maps-api-gatsby-example/src/examples

The bundle size is much smaller: https://bundlephobia.com/result?p=@react-google-maps/api@1.7.5

Enjoy!

[cristianTOTH]

I would like too...