GoogleMapsJavascriptAPIで地図が表示されずグレー一色になってしまう

###前提・実現したいこと
サイドバーとラジオボタン付きの地図を表示させたい

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

地図が描画されずグレーのまま

###該当のソースコード

javascript
1<!DOCTYPE html>
2<html>
3  <head>
4    <style>
5      #map_canvas {
6		height: 1000px;
7		width: 1000px;
8      }
9    </style>
10  </head>
11  <body>
12    <div id="map_canvas"></div>
13    <script>
14
15      var stationList = [
16        {"latlng":[35.681382,139.766084],name:"東京駅", nozomi : 1, hikari : 1, kodama : 1},
17        {"latlng":[35.630152,139.74044],name:"品川駅", nozomi : 1, hikari : 1, kodama : 1},
18        {"latlng":[35.507456,139.617585],name:"新横浜駅", nozomi : 1, hikari : 1, kodama : 1},
19        {"latlng":[35.25642,139.154904],name:"小田原駅", nozomi : 0, hikari : 1, kodama : 1},
20        {"latlng":[35.103217,139.07776],name:"熱海駅", nozomi : 0, hikari : 1, kodama : 1},
21        {"latlng":[35.127152,138.910627],name:"三島駅", nozomi : 0, hikari : 1, kodama : 1},
22        {"latlng":[35.142015,138.663382],name:"新富士駅", nozomi : 0, hikari : 0, kodama : 1},
23        {"latlng":[34.97171,138.38884],name:"静岡駅", nozomi : 0, hikari : 1, kodama : 1},
24        {"latlng":[34.769758,138.014928],name:"掛川駅", nozomi : 0, hikari : 0, kodama : 1},
25        {"latlng":[34.703741,137.734442],name:"浜松駅", nozomi : 0, hikari : 1, kodama : 1},
26        {"latlng":[34.762811,137.381651],name:"豊橋駅", nozomi : 0, hikari : 1, kodama : 1},
27        {"latlng":[34.96897,137.060662],name:"三河安城駅", nozomi : 0, hikari : 0, kodama : 1},
28        {"latlng":[35.170694,136.881637],name:"名古屋駅", nozomi : 1, hikari : 1, kodama : 1},
29        {"latlng":[35.315705,136.685593],name:"岐阜羽島駅", nozomi : 0, hikari : 1, kodama : 1},
30        {"latlng":[35.314188,136.290488],name:"米原駅", nozomi : 0, hikari : 1, kodama : 1},
31        {"latlng":[34.985458,135.757755],name:"京都駅", nozomi : 1, hikari : 1, kodama : 1},
32        {"latlng":[34.73348,135.500109],name:"新大阪駅", nozomi : 1, hikari : 1, kodama : 1}
33      ];
34      
35      var infoWnd = new google.maps.InfoWindow();
36      
37      var markerController = new google.maps.MVCObject();
38      
39      function initMap() {
40        var mapDiv = document.getElementById("map_canvas");
41        mapCanvas = new google.maps.Map(mapDiv);
42        
43        var i, choise = [ 
44          document.getElementById("nozomi"),
45          document.getElementById("hikari"),
46          document.getElementById("kodama")
47        ];
48        for (i = 0; i < choise.length; i++) {
49          google.maps.event.addDomListener(choise[i], "click", selectChanged);
50        }
51        
52
53        var bounds = new google.maps.LatLngBounds();
54        var station, latlng;
55        
56        for ( i = 0; i < stationList.length; i++) {
57          station = stationList[i];
58          latlng = new google.maps.LatLng(station.latlng[0], station.latlng[1]);
59          bounds.extend(latlng);
60          var marker = createMarker({
61            map : mapCanvas,
62            position : latlng,
63            others : station
64          });
65
66
67          createMarkerButton(marker);
68        }
69        mapCanvas.fitBounds(bounds);
70        
71        
72        markerController.set("select", "kodama");
73        google.maps.event.trigger(choise[2], "click");
74      }
75      
76      function selectChanged() {
77        var selectedVal = this.value;
78        markerController.set("select", selectedVal);
79        
80        var i, ul, listNames = ["nozomi", "hikari", "kodama"];
81        for (i = 0; i < listNames.length; i++) {
82          ul = document.getElementById(listNames[i] + "_list");
83          if (listNames[i] === selectedVal) {
84            ul.style.display = "block";
85          } else {
86            ul.style.display = "none";
87          }
88        }
89      }
90
91      function createMarker(params) {
92        var marker = new google.maps.Marker(params);
93
94        google.maps.event.addListener(marker, "click", function() {
95          infoWnd.setContent("<strong>" + params.others.name + "</strong>");
96          infoWnd.open(params.map, marker);
97        });
98
99        marker.bindTo("select", markerController, "select");
100        google.maps.event.addListener(marker, "select_changed", changeMarkerVisibility);
101        return marker;
102      }
103      
104      function changeMarkerVisibility() {
105        var marker = this;
106        var others = marker.get("others");
107        
108        var selectedVal = marker.get("select");
109       
110        marker.setVisible( others[selectedVal] ? true : false );
111      }
112
113      function createMarkerButton(marker) {
114        var others = marker.get("others"),
115            i, name, ul, li,
116            listNames = ["nozomi", "hikari", "kodama"];
117            
118        
119        for (i = 0; i < listNames.length; i++) {
120          name = listNames[i];
121          if (others[ name ]) {
122            ul = document.getElementById( name + "_list" );
123            li = document.createElement("li");
124            li.innerHTML = others.name;
125            ul.appendChild(li);
126            
127            google.maps.event.addDomListener(li, "click", function() {
128              google.maps.event.trigger(marker, "click");
129            });
130          }
131        }
132        
133      }
134      
135  </script>
136
137    </script>
138    <script src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXX&callback=initMap"
139        async defer></script>
140  </body>
141</html>

###試したこと
単純な地図の表示は出来ました(APIキーは使える)
クロームでコンソールを使ってみたところ、
Uncaught ReferenceError: google is not defined(anonymous function) @ てすてす.htm:35

Uncaught InvalidValueError: initMap is not a function
Ng @ js?key=XXXXX&callback=initMap:95
(anonymous function) @ js?key=XXXXX&callback=initMap:130
google.maps.Load @ js?keyXXXXX&callback=initMap:21
(anonymous function) @ js?key=XXXXX&callback=initMap:129
(anonymous function) @ js?key=XXXXX&callback=initMap:130
というエラーが出ました

###補足情報(言語/FW/ツール等のバージョンなど)
http://googlemaps.googlermania.com/google_maps_api_v3/ja/map_example_sidebar.html
このサイトを参考にしました。
サイトのはV3のだったのでAPIキーのコードを追加しました

kei344

2016/12/12 03:23

エラーは出ていませんか？デベロッパーツールで確認してみてください。http://eng-entrance.com/javascript-display-error

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

回答1件

ベストアンサー

javascript
1var infoWnd = new google.maps.InfoWindow();

GoogleマップAPIが読み込まれるのはbody閉じタグ直前にあるscript要素なので、この行が実行される時点ではgoogle.mapsが未定義です。initMap関数の中に入れてください。

投稿2016/12/12 09:59

Lhankor_Mhy

総合スコア36074

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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

GoogleMapsJavascriptAPIで地図が表示されずグレー一色になってしまう

関連した質問