teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問Uncaught error $ is not a functionの治し方をご教授ください。

編集履歴

質問編集履歴

8

エラー追加。

2018/11/18 13:16

投稿

dai__
dai__

スコア12

test CHANGED
File without changes
test CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  - エラー内容：
8
8
 
9
- TypeError: this.lat is not a function
9
+ `home:1 Uncaught (in promise) Ic {message: "initMap is not a function", name: "InvalidValueError", stack: "Error↵ at new Ic (https://maps.googleapis.com/m…8TqUIxyjgLnkascjRmL-AM_U&callback=initMap:123:108"}`
10
10
 
11
11
 
12
12
 
@@ -236,4 +236,8 @@
236
236
 
237
237
 
238
238
 
239
+
240
+
241
+
242
+
239
243
  以上、ご回答お待ちしております。

7

コード修正。

2018/11/18 13:16

投稿

dai__
dai__

スコア12

test CHANGED
File without changes
test CHANGED
@@ -54,7 +54,7 @@
54
54
 
55
55
  <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
56
56
 
57
- <script src="https://maps.googleapis.com/maps/api/js?key=**xxxxxx**"></script>
57
+ <script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxx"></script>
58
58
 
59
59
 
60
60
 
@@ -78,18 +78,6 @@
78
78
 
79
79
  function(position) {
80
80
 
81
- // fetch({{ url('/distance') }}, {
82
-
83
- // method: 'POST',
84
-
85
- // body: {
86
-
87
- // distance: position
88
-
89
- // }
90
-
91
- // })
92
-
93
81
  // // 自分の緯度・経度を変数に格納
94
82
 
95
83
  mapLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
@@ -210,6 +198,40 @@
210
198
 
211
199
  </head>
212
200
 
201
+
202
+
203
+ <body>
204
+
205
+ <header>
206
+
207
+ <td align="center">xxxxxxxxxxxxxxxxx</td>
208
+
209
+ </header>
210
+
211
+ <aside></aside>
212
+
213
+ <main>
214
+
215
+
216
+
217
+ <div id="map" style="width:400px; height:300px"></div>
218
+
219
+
220
+
221
+ </main>
222
+
223
+
224
+
225
+ <footer></footer>
226
+
227
+
228
+
229
+ </body>
230
+
231
+
232
+
233
+ </html>
234
+
213
235
  ```
214
236
 
215
237
 

6

ソースコード修正。

2018/11/18 13:06

投稿

dai__
dai__

スコア12

test CHANGED
File without changes
test CHANGED
@@ -38,11 +38,13 @@
38
38
 
39
39
  ```html
40
40
 
41
+
42
+
41
43
  <html>
42
44
 
43
45
  <head lang="ja">
44
46
 
45
- <link href="{{ asset('css/design.css') }}" rel="stylesheet"></script>
47
+ <link href="{{ asset('css/design.css') }}" rel="stylesheet">
46
48
 
47
49
  <!--AJAXの宣言-->
48
50
 
@@ -52,6 +54,10 @@
52
54
 
53
55
  <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
54
56
 
57
+ <script src="https://maps.googleapis.com/maps/api/js?key=**xxxxxx**"></script>
58
+
59
+
60
+
55
61
  <script>
56
62
 
57
63
  // 現在地取得処理

5

ソースコード修正。

2018/11/18 12:51

投稿

dai__
dai__

スコア12

test CHANGED
File without changes
test CHANGED
@@ -50,7 +50,9 @@
50
50
 
51
51
  <!--JQUERYの読み込み-->
52
52
 
53
- <script src="https://code.jquery.com/jquery-1.10.1.min.js">
53
+ <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
54
+
55
+ <script>
54
56
 
55
57
  // 現在地取得処理
56
58
 

4

ソースコード修正。

2018/11/18 12:39

投稿

dai__
dai__

スコア12

test CHANGED
File without changes
test CHANGED
@@ -42,7 +42,7 @@
42
42
 
43
43
  <head lang="ja">
44
44
 
45
- <link href="{{ asset('css/design.css') }}" rel="stylesheet">
45
+ <link href="{{ asset('css/design.css') }}" rel="stylesheet"></script>
46
46
 
47
47
  <!--AJAXの宣言-->
48
48
 
@@ -68,20 +68,6 @@
68
68
 
69
69
 
70
70
 
71
- function initMap() {
72
-
73
- // Geolocation APIに対応している
74
-
75
- if (navigator.geolocation) {
76
-
77
- // 現在地を取得
78
-
79
- navigator.geolocation.getCurrentPosition(
80
-
81
- // 取得成功した場合
82
-
83
-
84
-
85
71
  function(position) {
86
72
 
87
73
  // fetch({{ url('/distance') }}, {

3

ソースコード修正。

2018/11/18 12:37

投稿

dai__
dai__

スコア12

test CHANGED
File without changes
test CHANGED
@@ -50,11 +50,7 @@
50
50
 
51
51
  <!--JQUERYの読み込み-->
52
52
 
53
- <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
53
+ <script src="https://code.jquery.com/jquery-1.10.1.min.js">
54
-
55
-
56
-
57
- <script>
58
54
 
59
55
  // 現在地取得処理
60
56
 

2

ソースコード追加。

2018/11/18 12:29

投稿

dai__
dai__

スコア12

test CHANGED
File without changes
test CHANGED
@@ -72,8 +72,34 @@
72
72
 
73
73
 
74
74
 
75
+ function initMap() {
76
+
77
+ // Geolocation APIに対応している
78
+
79
+ if (navigator.geolocation) {
80
+
81
+ // 現在地を取得
82
+
83
+ navigator.geolocation.getCurrentPosition(
84
+
85
+ // 取得成功した場合
86
+
87
+
88
+
75
89
  function(position) {
76
90
 
91
+ // fetch({{ url('/distance') }}, {
92
+
93
+ // method: 'POST',
94
+
95
+ // body: {
96
+
97
+ // distance: position
98
+
99
+ // }
100
+
101
+ // })
102
+
77
103
  // // 自分の緯度・経度を変数に格納
78
104
 
79
105
  mapLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
@@ -86,7 +112,7 @@
86
112
 
87
113
  // mapLatLngの値をPHPへ渡す
88
114
 
89
- $.ajax({
115
+ jQuery.ajax({
90
116
 
91
117
  type: "POST",
92
118
 
@@ -100,13 +126,99 @@
100
126
 
101
127
  }
102
128
 
129
+ })
130
+
131
+
132
+
133
+ // // マップオプションを変数に格納
134
+
135
+ var mapOptions = {
136
+
137
+ zoom : 15, // 拡大倍率
138
+
139
+ center : mapLatLng // 緯度・経度
140
+
141
+ };
142
+
143
+ // マップオブジェクト作成
144
+
145
+ var map = new google.maps.Map(
146
+
147
+ document.getElementById("map"), // マップを表示する要素
148
+
149
+ mapOptions // マップオプション
150
+
151
+ );
152
+
153
+ //　マップにマーカーを表示する
154
+
155
+ var marker = new google.maps.Marker({
156
+
157
+ map : map, // 対象の地図オブジェクト
158
+
159
+ position : mapLatLng // 緯度・経度
160
+
103
- })`
161
+ });
162
+
104
-
163
+ },
164
+
165
+
166
+
105
-
167
+ // 取得失敗した場合
168
+
106
-
169
+ function(error) {
170
+
107
-
171
+ // エラーメッセージを表示
172
+
108
-
173
+ switch(error.code) {
174
+
175
+ case 1: // PERMISSION_DENIED
176
+
177
+ alert("位置情報の利用が許可されていません");
178
+
109
- 以下、続く。
179
+ break;
180
+
181
+ case 2: // POSITION_UNAVAILABLE
182
+
183
+ alert("現在位置が取得できませんでした");
184
+
185
+ break;
186
+
187
+ case 3: // TIMEOUT
188
+
189
+ alert("タイムアウトになりました");
190
+
191
+ break;
192
+
193
+ default:
194
+
195
+ alert("その他のエラー(エラーコード:"+error.code+")");
196
+
197
+ break;
198
+
199
+ }
200
+
201
+ }
202
+
203
+ );
204
+
205
+ // Geolocation APIに対応していない
206
+
207
+ } else {
208
+
209
+ alert("この端末では位置情報が取得できません");
210
+
211
+ }
212
+
213
+ }
214
+
215
+
216
+
217
+ </script>
218
+
219
+
220
+
221
+ </head>
110
222
 
111
223
  ```
112
224
 

1

体裁整え。

2018/11/18 12:27

投稿

dai__
dai__

スコア12

test CHANGED
File without changes
test CHANGED
@@ -1,8 +1,16 @@
1
- やりたいこと：javascriptにて位置情報を取得し、PHPへ送ったのち、SQLへ保存（格納？）
1
+ - リスト実現したいこと：
2
2
 
3
- エラー内容：TypeError: this.lat is not a function
3
+ javascriptにて位置情報を取得し、PHPへ送ったのち、SQLへ保存（格納？）
4
4
 
5
5
 
6
+
7
+ - エラー内容：
8
+
9
+ TypeError: this.lat is not a function
10
+
11
+
12
+
13
+ - 問題発生までの流れ：
6
14
 
7
15
  javascriptにて、phpへ変数（位置情報）を渡すために、Jqueryのajaxを使用しています。
8
16
 
@@ -12,21 +20,19 @@
12
20
 
13
21
  なぜかエラー内容には、this.latという文字列が確認できます。
14
22
 
15
-
16
-
17
23
  this.latという文字列は利用していないのですが、なぜでてくるのでしょうか。
18
24
 
19
- また、mapLatLngを定義し、そこに位置情報を入れている認識なのですが、これが勝手に
25
+ mapLatLngを定義し、そこに位置情報を入れている認識なのですが、
20
26
 
21
- latとlngに分解されているのでしょうか？
27
+ これが勝手にlatとlngに分解されているのでしょうか？
28
+
29
+ $をJqueryに変更してみましたが、直りません。
30
+
31
+ Jqueryの読み込みあたりが間違っているのかなと思ったりもしています。
22
32
 
23
33
 
24
34
 
25
- $をJqueryに変更してみましたが、直りません。
35
+ - ソースコード
26
-
27
-
28
-
29
- Jqueryの読み込みあたりが間違っているのかなと思ったりもしています。
30
36
 
31
37
 
32
38