Estoy tratando de comparar dos mapas en el componente de comparación de reacción, hay dos mapas uno al lado del otro y todo lo que quiero es cuando arrastro un mapa, debería ser seguido por el segundo mapa en la segunda parte de la pantalla, hasta ahora pude arrastrar ellos juntos. Si arrastro el mapa de la izquierda, arrastra el de la derecha con él (actúa como un solo mapa, solo muestra la línea de separación) pero se está quedando atrás del izquierdo, esto sucede con cualquiera de ellos (si se arrastra el de la izquierda, el de la derecha se queda atrás y viceversa). Entonces, ¿hay algún método o propiedad para suavizar el arrastre?

Aquí está mi fragmento de código: -

 initMap = (mapProps, map) => { var self = this; const { google, google1, map1 } = mapProps; this.setState((state) => ({ ...state, google: google, map: map })) // draw all the waypoints of mission and fence on map if (this.state.compare) { google.maps.event.addListener(map, 'center_changed', () => { this.setState((state) => ({ ...state, center: map.getCenter() })) }); google.maps.event.addListener(map, 'drag', () => { this.setState((state) => ({ ...state, center: map.getCenter() })) }); google.maps.event.addListener(map, 'dragstart', () => { this.setState((state) => ({ ...state, center: map.getCenter() })) }); google.maps.event.addListener(map, 'mousemove', () => { this.setState((state) => ({ ...state, center: map.getCenter() })) }); google.maps.event.addListener(map, 'idle', () => { this.setState((state) => ({ ...state, center: map.getCenter() })) }); google.maps.event.addListener(map, 'zoom_changed', () => { this.setState((state) => ({ ...state, zoom: map.getZoom(), })) }); }

Así es como se ve

El código anterior es para el primer mapa, el mismo código se usa para el segundo mapa.