参考：Google Maps JavaScript APIの使い方まとめ

やりたいこと

wordpress ＋ reactでgoogle mapを表示させたい。

エラーの内容

【エラーの内容】
TypeError: null is not an object (evaluating 'a.firstChild')
ページをリロードするとこのエラーが出てページが表示されなくなります。
(一番最初にページを表示するときはgoogle mapもちゃんと表示されます。)
上記の参考サイトのようにhtmlとjsファイルの2つに分けて記述すると
ページをリロードしてもちゃんと表示されます。

状況

・header.phpでライブラリ読み込み
・home.jsで地図のインスタンス生成などの処理、google mapを表示

//header.php
<script src="https://maps.googleapis.com/maps/api/js?key=mykey"></script>

//home.js
class Home extends Component {
  render () {
    return (
      <div className='home'>
        <div id="map-canvas">{this.gmap()}</div>
      </div>
)}

gmap () {
    // キャンパスの要素を取得する
    var canvas = document.getElementById('map-canvas');

    // 中心の位置座標を指定する
    var latlng = new google.maps.LatLng( 35.792621, 139.806513 );

    // 地図のオプションを設定する
    var mapOptions = {
      zoom: 17,    // ズーム値
      center: latlng,    // 中心座標 [latlng]
    };

    // [canvas]に、[mapOptions]の内容の、地図のインスタンス([map])を作成する
    var map = new google.maps.Map(canvas, mapOptions);
  }
}

質問

・エラーの内容と原因を、予想でもいいので教えていただきたいです。
・エラーを解決してgoogle mapを表示させるにはどう記述すれば良いですか？

回答宜しくお願いします。