I want to make DirectionsRenderer draggable, but it doesn't work.

[wildskyf]

Hi, Tom Chen, I want to do this, but my direction just stuck. Here is what I did:

render () {
    const {directions} = this.state;
    return (
        <GoogleMapLoader
            containerElement={
                <div
                    {...this.props}
                    style={{
                        margin: "1rem 1.75rem",
                        height: "300px",
                        width: "500px"
                    }}/>
            }
            googleMapElement={
            <GoogleMap
                ref="map"
                defaultZoom={17}
                defaultCenter={{ lat: 25.0432253, lng: 121.53263262 }}>
                {directions ?
                    <DirectionsRenderer
                        directions={directions}
                        draggable={true}    // Draggable is here !!!
                        map={this.refs.map}
                        /> :
                    null
                }
            </GoogleMap>
            }
        />
    );
}

Do you know where is the problem?

thanks :)

[tomchentw]

First, you don't need to set map={this.refs.map} when using react-google-maps.

Second, the draggable is in setOptions, so you'll have to specify it:
https://developers.google.com/maps/documentation/javascript/reference#DirectionsRendererOptions

<DirectionsRenderer
  directions={directions}
  options={{draggable:true}} // or defaultOptions
/> 

See README.md Rule 4: https://github.com/tomchentw/react-google-maps#rule-4

[wildskyf]

It works!! I couldn't understand Rule 4 before, but now I realize it!
Thank you for your detailed instant reply. :D

[tomchentw]

LOL sorry about the poor documentation :( #128

[wildskyf]

Nope, it's my bad.
I am new to react & My english isn't very good.
Don't beat yourself up. ;)

[tomchentw]

Thanks @wi1d5ky ! Let's keep moving forward.

[Tjorriemorrie]

Isn't directions also in the options? Why is that a normal attribute?