2

I am working on a react web client app that listens for a json array of gps coordinates and updates markers on a map accordingly (using google-maps-react). Everything works as expected, however, the markers appear to flicker as they move. I think a solution would be to update less frequently and use something like: marker-animate to smooth out the marker position updates. I am relatively new to react and I cant figure out how to incorporate marker-animate with google-maps-react.

Here is how my app updates markers:

     var marker_data=JSON.parse(e.data);
     var markerIndex=null;
     for(var i=0; i<_this.state.markers.length; i++){
            if(_this.state.markers[i].id==marker_data.id){
                markerIndex=i;
                break;
            }
        }
        if(markerIndex!==null){
            var existingMarkers=_this.state.markers;
            existingMarkers[markerIndex]=marker_data;
            _this.setState({ markers: existingMarkers });
        }
        else{
            var existingMarkers=_this.state.markers;
            existingMarkers[existingMarkers.length]=marker_data;
            _this.setState({ markers: existingMarkers });
        }
    }

Then in render()

    const _this=this;

    const markerElements = this.state.markers.map(function(marker_data) {
        //console.log(coord);
        return <Marker key={marker_data.id} data={marker_data} name={'Marker '+marker_data.id} position={marker_data.loc} onClick={_this.onMarkerClick} />;
      //return <Marker name={'Marker '+marker_data.id} position={marker_data.loc} onClick={_this.onMarkerClick}/>
    });
    <Map google={this.props.google}
        zoom={14}
        onReady={this.handleReady}
        onClick={this.onMapClick}
        initialCenter={{"lat": 33.051,"lng": -79.93}}
    >
        {markerElements}
        <InfoWindow marker={_this.state.activeMarker} visible={_this.state.showingInfoWindow} onClose={_this.windowHasClosed}>
            <div><h1>{'Marker ID: '}</h1></div>
        </InfoWindow>
    </Map>

So, where might marker-animate (or something like it) be used?

Jack
  • 51
  • 6
  • 1
    Did you figure out how to get rid of the flickering. Im experiencing the same issue. Especially when i get the icons to change if you hover over them – Jeremy Levett Jun 27 '18 at 02:20
  • 1
    I think this is a limitation of react. I fixed it by using jquery, which directly manipulates the DOM and does not re-render the entire map. – Jack Jul 02 '18 at 20:26

0 Answers0