質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

Q&A

0回答

1559閲覧

GoogleMaoAPIでエラー

退会済みユーザー

退会済みユーザー

総合スコア0

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

0グッド

0クリップ

投稿2017/03/07 13:16

編集2022/01/12 10:55

参考: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を表示させるにはどう記述すれば良いですか?

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問