PolylinesOprtions DirectionRender react-google-maps/api

Question

I try to change marker on a DirectionRender from react-google-maps/api. I already change de polyline color but i dont make change de marker A and B, my code.

<DirectionsRenderer
      getIcon={(icon) => console.log("icon render", icon)}
      options={{
        directions: response,
              polylineOptions: {
           strokeColor: "#c23531",
          icons: [{
            icon:{
              path:{to},
              strokeOpacity: 1
            },
            offset:'50%'
          },{
            icon:{
              path:{fromm},
              strokeOpacity: 1
            },
            offset:'50%'
          }],
        },
      }}
/>

Answer 1

The DirectionsRenderer of @react-google-maps/api library doesn't have a getIcon prop name just like you have in your code. To change the icon of the markers in the DirectionsRenderer, you need to use the options which has the properties of google.maps.DirectionsRendererOptions interface .

In there, you can see a markerOptions props name which uses the google.maps.MarkerOptions interface that have the icon properties.

Here's a sample code (put your API key on the index.js file of the code sample to make it work) and code snippet how to use the options properties to change the icon:

<DirectionsRenderer
              directions={this.state.directions}
              options={{
                markerOptions: {
                  icon:
                    'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
                }
              }}
            />