参考: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を表示させるにはどう記述すれば良いですか?
回答宜しくお願いします。
あなたの回答
tips
プレビュー