How to: google-maps-react marker easing

781 views Asked by At

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?

0

There are 0 answers