React-google-maps re-rendering issue

Question

I'm having some issues with the react-google-maps npm module.

First render, works like a charm. When re-rendering the map-component i get the classic google-maps error.

Uncaught TypeError: Cannot read property 'offsetWidth' of null
Uncaught (in promise) TypeError: Cannot read property 'componentWillReceiveProps' of null(…)

Because the map object isn't available when rendering?

My google-maps Map Component

import React, { PropTypes } from 'react'
import { GoogleMap, Marker, GoogleMapLoader } from 'react-google-maps'
export class Map extends React.Component {
  static propTypes = {
    coordinates: PropTypes.object,
    markers: PropTypes.array
  };

  render () {
    return (<section onloadstyle={{height: '300px'}}>
      <GoogleMapLoader
        containerElement={
          <div
            {...this.props}
            style={{
              height: '300px',
              width: '100%'
            }}
          />
        }
        googleMapElement={
          <GoogleMap
            ref={(map) => console.log(map)}
            defaultZoom={15}
            defaultCenter={this.props.coordinates}>
            {this.props.markers.map((marker, index) => {
              return (
                <Marker key={index} {...marker} />
              )
            })}
          </GoogleMap>
        }
      />
    </section>)
  }
}

export default Map

And i use the component like this:

var coordinates = {lat: this.props.item.delivery_address_lat, lng: this.props.item.delivery_address_lng}
var map = this.props.item.delivery_address_lat !== 0 && this.props.item.delivery_address_lng !== 0 ? (<Row id='map'>
      <Map markers={[{position: coordinates}]} coordinates={coordinates} />
</Row>) : ''

Is this because the google-maps-react module isn't unmounting the component properly or is it something i've done?

The following is inside head

<script src="https://maps.googleapis.com/maps/api/js?key=MY-KEY"></script>

EDIT

Tried to solve it a non react-redux way and this is by no means a solution since it produces the error message: Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the Map component.

But still, the map re-renders correctly. I tried doing this the redux way of calling passed prop functions & state and set the {map: section} in the state, passing it down from the calling view. Didn't solve a thing and resulted in the same error message, even though it was delayed with setTimeout

Im kind of stuck here, don't know how to solve this.

componentDidMount () {
    this.setState({map: null})
    setTimeout(() => this.setState({
      map: <section onloadstyle={{height: '300px'}}>
      <GoogleMapLoader
        containerElement={
          <div
            {...this.props}
            style={{
              height: '300px',
              width: '100%'
            }}
          />
        }
        googleMapElement={
          <GoogleMap
            ref={(map) => console.log(map)}
            defaultZoom={15}
            defaultCenter={this.props.coordinates}>
            {this.props.markers.map((marker, index) => {
              return (
                <Marker key={index} {...marker} />
              )
            })}
          </GoogleMap>
        }
      />
    </section>
    }), 300)
  }

  render () {
    if (!this.state) {
      return <span />
    } else {
      return this.state.map
    }
  }

Answer 1

The solution for the second edit was to clear the setTimeout() call in the componentWillUnmount() function.

You always have to clear intervals & timeouts when the component is unmounting.

componentDidMount () {
    this.setState({map: null})
    this.timeout = setTimeout(() => this.setState({
      map: <section onloadstyle={{height: '300px'}}>
      <GoogleMapLoader
        containerElement={
          <div
            {...this.props}
            style={{
              height: '300px',
              width: '100%'
            }}
          />
        }
        googleMapElement={
          <GoogleMap
            ref={(map) => console.log(map)}
            defaultZoom={15}
            defaultCenter={this.props.coordinates}>
            {this.props.markers.map((marker, index) => {
              return (
                <Marker key={index} {...marker} />
              )
            })}
          </GoogleMap>
        }
      />
    </section>
    }), 300)
  }

  componentWillUnmount () {
    clearTimeout(this.timeout)
  }

  render () {
    if (!this.state) {
      return <span />
    } else {
      return this.state.map
    }
  }

This solution isn't a good one and isn't in-line with the react-redux workflow. But it works.