google maps API を使ったヒートマップ作成

google mapを利用したヒートマップ作成

現在、Google mapを使ってヒートマップを作成しようと
Java scriptを動かしているのですが以下のエラーメッセージが
分からず質問しました。

発生している問題・エラーメッセージ

Uncaught ReferenceError:google is not defined at 〇〇.html:17

該当のソースコード

Javascript
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>heat map</title>
6  </head>
7<body>
8
9<div id="map-canvas"></div>
10
11<script type="text/javascript">
12// 表示オプション
13	var options = {
14        zoom: 15,
15__**        center: new google.maps.LatLng(43.068664, 141.351034)**__
16      	};
17
18	var map = new google.maps.Map(document.getElementById("map-canvas"), options);
19   
20	var datas = [
21    	 {location: new google.maps.LatLng(43.06594, 141.34658),weight:30}
22	,{location: new google.maps.LatLng(43.05792, 141.35844),weight:30}
23   	,{location: new google.maps.LatLng(43.07072, 141.32076),weight:30} 
24	];
25 
26// ヒートマップレイヤーのオブジェクトを生成
27	var heatmap = new google.maps.visualization.HeatmapLayer({
28    	 data: datas
29    	,maxIntensity:50
30    	,radius:50
31    	,opacity:0.8
32	});
33// Mapのインスタンスを設定
34heatmap.setMap(map);
35
36 </script>
37
38 <script async defer
39      src="https://maps.googleapis.com/maps/api/js?key=my key&libraries=visualization">
40 </script>
41
42</body>
43</html>
44
45### 試したこと
46
47locationを追加する前にサンプルとして調べつつやってみてるのですがエラーが解決できません。
48
49center: new google.maps.LatLng(43.068664, 141.351034)をコメント化してみると
50var map = new google.maps.Map(document.getElementById("map-canvas"), options);
51がエラーになってしまいます。書き方がおかしいのでしょうか。
52
53### 補足情報（FW/ツールのバージョンなど）

yoorwm

2020/01/23 03:16

何を参考にしましたか？

行動規範の内容に同意します

回答1件

ベストアンサー

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という変数を使った後です。

つまり、変数を定義する前に使用しているということで、そのため、変数が定義されていない、というエラーが出ます。

解決方法ですが、