diff --git a/src/google_map.js b/src/google_map.js index 1a0bd80e..dc525a77 100644 --- a/src/google_map.js +++ b/src/google_map.js @@ -239,7 +239,7 @@ export default class GoogleMap extends Component { this.zoomAnimationInProgress_ = false; this.state = { - overlayCreated: false, + overlay: null, }; } @@ -587,7 +587,7 @@ export default class GoogleMap extends Component { : '2000px'; const div = document.createElement('div'); - this.div = div; + this.overlay = div; div.style.backgroundColor = 'transparent'; div.style.position = 'absolute'; div.style.left = '0px'; @@ -601,29 +601,21 @@ export default class GoogleMap extends Component { maps, overlay.getProjection() ); - ReactDOM.unstable_renderSubtreeIntoContainer( - this_, - , - div, - // remove prerendered markers - () => this_.setState({ overlayCreated: true }) - ); + + this_.setState(state => ({ + ...state, + overlay: div, + })); }, onRemove() { - if (this.div) { - ReactDOM.unmountComponentAtNode(this.div); + this_.setState(state => ({ + ...state, + overlay: null, + })); + + if (this.overlay) { + ReactDOM.unmountComponentAtNode(this.overlay); } }, @@ -1062,7 +1054,7 @@ export default class GoogleMap extends Component { }; render() { - const mapMarkerPrerender = !this.state.overlayCreated + const mapMarkerPrerender = !this.state.overlay ? + {this.state.overlay && + ReactDOM.createPortal( + , + this.state.overlay + )} {/* render markers before map load done */} {mapMarkerPrerender}