回答編集履歴

1 少し追記

Lhankor_Mhy

Lhankor_Mhy score 25396

2020/01/23 13:28  投稿

```
Uncaught ReferenceError:google is not defined
```
勝手訳:google が定義されていません。
---
`google`という変数が使えるようになるのは、`https://maps.googleapis.com/maps/api/js?key=my key&libraries=visualization`が読み込まれた後です。
しかし、コードを拝見すると、`<script async defer
src="https://maps.googleapis.com/maps/api/js?key=my key&libraries=visualization">
</script>`が読み込まれるのは、`google`という変数を使った後です。
つまり、変数を定義する前に使用しているということで、そのため、変数が定義されていない、というエラーが出ます。
---
解決方法ですが、
0. APIの読み込みを先に書く
0. &callback= を使ってコールバック関数内に書く
0. ロードイベントを拾って実行する
などがあると思いますが、1番目を取るなら`async defer`はとりあえず外した方がいいと思います。
などがあると思いますが、1番目を取るなら`async defer`はとりあえず外した方がいいと思います。個人的にはドキュメントに例のある2番がいいのではないかと。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る