0

I have my component MapWithADirectionsRenderer defined like here

var markers = [];
const MapWithADirectionsRenderer = compose(

withProps({
    googleMapURL: "https://maps.googleapis.com/maps/api/js?...",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `100%` }} />,
    mapElement: <div style={{ height: `100%` }}/>
  }),
  withScriptjs,
  withGoogleMap,
  lifecycle({

  componentDidMount() {

  const DirectionsService = new google.maps.DirectionsService();

  DirectionsService.route({
    origin: this.props.origin,
    destination: this.props.destination,
    travelMode: google.maps.TravelMode.DRIVING,
  }, (result, status) => {

    if (status === google.maps.DirectionsStatus.OK) {

      // here I fill my marker array correctly

      this.setState({
          directions: result
      });

     } else {
      console.error(`error fetching directions ${result}`);
     }
   });
 }

 })
)(props=> 
  <GoogleMap
    defaultZoom={3}
    defaultCenter={// coordinates}
  >
    {props.directions && <DirectionsRenderer 
                            options={{draggable:true}}
                            directions={props.directions}
                            ref={(r) => directionsRef = r}
                            onDirectionsChanged={getDirections}
                             />
    }
    {markers.map( (marker,i) => (
                              <Marker
                                key={i}
                                position={{ lat: marker.lat, lng: marker.lng }}
                            >
                              </Marker>
                          ))}


  </GoogleMap>
);

but after moving route on map, the directions fetched from Google update correctly, but not the markers that I want to show. The same markers are always shown.

Is there some way to update MapWithADirectionRenderer so it re-render my Markers and not only the directions? Thank you

batt
  • 3,382
  • 2
  • 11
  • 12
  • Where is the markers array defined? I would expect it to be part of props. ComponentDidMount only fires once, so if it's a value that's dependent on props it will not updated after the initial mounting of the component. – Shadowfool May 28 '18 at 20:04
  • It is defined outside, before starting defining MapWithADirectionRenderer component, but is filled with lat,lng inside componentDidMount() function. I tried to define it inside and access it by props but I get 'map' of undefined error. @Shadowfool – batt May 28 '18 at 20:14
  • I'd have to see what you're doing in componentDidMount for this to make sense, but none the less that's not going to update as props update since it only fires once. – Shadowfool May 28 '18 at 20:15
  • You can see now @Shadowfool – batt May 28 '18 at 20:35

0 Answers0