Server side rendering markup

Thanks for this awesome library. It’s very useful. However, I detected a little bit problem while rendering on the server side.

I noticed there is a <div> containing my marker with a calculated top. This top style do not match in the server generated content and the client side. It differs by a tiny amount but if differs, so the markup is not valid generating this error:

https://www.dropbox.com/s/msiafi5mmr7qi6j/Captura de pantalla 2017-07-04 22.47.24.png?dl=0

[malaman]

@valorize in simplest case you can use something like

import GoogleMapReact from 'google-map-react';

export class GoogleMap extends React.Component<IProps, IState> {
    constructor(props) {
        super(props);
        this.state = {
            mounted: false
        };
    }

    componentDidMount() {
        this.setState({mounted: true});
    }

    render() {
        return (
            <div>
                {this.state.mounted > 0 &&
                    <GoogleMapReact
                        bootstrapURLKeys={{key: 'XXXX'}}
                        zoom={this.props.zoom}
                        options={this.props.options}
                        center={this.props.center}                        
                    >
                        {this.props.markers}
                    </GoogleMapReact>
                }
            </div>
        );
    }
}

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.