react-google-maps change marker icon to waypoints

Question

I am developing tracking web view of delivery app using react-google-maps (https://tomchentw.github.io/react-google-maps/). I need to customize the icon of the waypoints marker. I already search in google and integrate to my codes but unfortunately none worked. Data are from api response.

Here's my code.

 const TrackingMap = compose(
        withProps({
            googleMapURL: "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=3.exp&libraries=geometry,drawing,places",
            loadingElement: <div style={{ height: `100%` }} />,
            containerElement: <div style={{ height: '700px', width:'100%' }} />,
            mapElement: <div style={{ height: '100%' }} />,
        }),
        withScriptjs,
        withGoogleMap,
        lifecycle({
            componentDidMount() {
                let destinationLat, destinationLng, pickupLat, pickupLng;
                var waypts = [];
                var wayptsMarker = [];
                const DirectionsService = new google.maps.DirectionsService();

                for (let i = 0; i < points.length; i++) {
                    if (i < points.length-1 ) {
                       waypts.push({
                            location: new google.maps.LatLng(parseFloat(points[i].destination_latutude), parseFloat(points[i].destination_longitude)),
                            stopover: true,
                        });
                    }
                    
                    if (i == 0) {
                        pickupLat = parseFloat(points[i].pickup_latutude)
                        pickupLng = parseFloat(points[i].pickup_longitude)
                    }
                    
                    if (i == points.length-1) {
                        destinationLat = parseFloat(points[i].destination_latutude);
                        destinationLng =  parseFloat(points[i].destination_longitude);
                    }
                }

                DirectionsService.route({
                    origin: new google.maps.LatLng(parseFloat(bookingDetails.rider_latitude), parseFloat(bookingDetails.rider_longitude)),
                    destination:  new google.maps.LatLng(destinationLat, destinationLng),
                    waypoints: waypts,
                    travelMode: google.maps.TravelMode.DRIVING,
                    optimizeWaypoints: true,
                }, (result, status) => {
                    if (status === google.maps.DirectionsStatus.OK) {
                        this.setState({
                            directions: result,
                        });
                    } else {
                        alert(`error fetching directions ${result}`);
                    }
                });
            }
        })
    )(props =>
        <GoogleMap
            defaultZoom={7}
            defaultCenter={{ lat: parseFloat(bookingDetails.rider_latitude), lng: parseFloat(bookingDetails.rider_longitude) }}
        >
            
        {props.directions && 
            <DirectionsRenderer
                suppressMarkers= {true}
                directions={props.directions}
                geodesic={true}
                options={{
                    polylineOptions: {
                        strokeOpacity: 1.0,
                        strokeColor: '#F36629',
                        strokeWeight: 6,
                    },
                }}
            />
        }

        </GoogleMap>
    );

Answer 1

I see that you are using suppressMarkers in your DirectionsRenderer object but to properly use it, you need to put it inside the options property. Setting it to true removes all the default markers(origin, waypoints and destination). You can then use Marker object to put markers on these positions. Since Waypoints is in array, you can loop through this array using .map and put a Marker object with icon property. This will change and set all your Waypoints marker with the icon value.

Here's a code snippet:

<GoogleMap
        defaultCenter={{ lat: 40.756795, lng: -73.954298 }}
        defaultZoom={13}
      >
        {this.state.directions != null && (
          <DirectionsRenderer
            directions={this.state.directions}
            options={{ suppressMarkers: true }}
          />
        )}
        <Marker position={this.state.origin} />
        <Marker position={this.state.dest} />
        {this.state.waypts.map(waypt => (
          <Marker
            position={{ lat: waypt.location.lat, lng: waypt.location.lng }}
            icon={'http://maps.google.com/mapfiles/kml/paddle/blu-blank.png'}
            label={'W'}
          />
        ))}
      </GoogleMap>

Here's a sample code. Put your API key in the index.js file for the code to work.