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

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

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

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

2回答

1305閲覧

Uncaught error $ is not a functionの治し方をご教授ください。

dai__

総合スコア12

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/11/18 12:06

編集2022/01/12 10:55
  • リスト実現したいこと:

javascriptにて位置情報を取得し、PHPへ送ったのち、SQLへ保存(格納?)

  • エラー内容:

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"}

  • 問題発生までの流れ:

javascriptにて、phpへ変数(位置情報)を渡すために、Jqueryのajaxを使用しています。
そこで、ajaxにて変数を渡そうとしたときに、上記のようなエラーがでてしまい先に進めません。
私としては、ajaxの場所でエラーが発生しているのでajaxがきちんと定義されていないのかと思っていますが、
なぜかエラー内容には、this.latという文字列が確認できます。
this.latという文字列は利用していないのですが、なぜでてくるのでしょうか。
mapLatLngを定義し、そこに位置情報を入れている認識なのですが、
これが勝手にlatとlngに分解されているのでしょうか?
$をJqueryに変更してみましたが、直りません。
Jqueryの読み込みあたりが間違っているのかなと思ったりもしています。

  • ソースコード

html

1 2<html> 3 <head lang="ja"> 4 <link href="{{ asset('css/design.css') }}" rel="stylesheet"> 5 <!--AJAXの宣言--> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <!--JQUERYの読み込み--> 8 <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script> 9 <script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxx"></script> 10 11 <script> 12 // 現在地取得処理 13 function initMap() { 14 // Geolocation APIに対応している 15 if (navigator.geolocation) { 16 // 現在地を取得 17 navigator.geolocation.getCurrentPosition( 18 // 取得成功した場合 19 20 function(position) { 21 // // 自分の緯度・経度を変数に格納 22 mapLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 23 24 console.log(mapLatLng); 25 26 // mapLatLngの値をPHPへ渡す 27 jQuery.ajax({ 28 type: "POST", 29 url: "send.php", 30 data: {"item1":mapLatLng }, 31 success: function(html){ 32 alert(html); 33 } 34 }) 35 36 // // マップオプションを変数に格納 37 var mapOptions = { 38 zoom : 15, // 拡大倍率 39 center : mapLatLng // 緯度・経度 40 }; 41 // マップオブジェクト作成 42 var map = new google.maps.Map( 43 document.getElementById("map"), // マップを表示する要素 44 mapOptions // マップオプション 45 ); 46 // マップにマーカーを表示する 47 var marker = new google.maps.Marker({ 48 map : map, // 対象の地図オブジェクト 49 position : mapLatLng // 緯度・経度 50 }); 51 }, 52 53 // 取得失敗した場合 54 function(error) { 55 // エラーメッセージを表示 56 switch(error.code) { 57 case 1: // PERMISSION_DENIED 58 alert("位置情報の利用が許可されていません"); 59 break; 60 case 2: // POSITION_UNAVAILABLE 61 alert("現在位置が取得できませんでした"); 62 break; 63 case 3: // TIMEOUT 64 alert("タイムアウトになりました"); 65 break; 66 default: 67 alert("その他のエラー(エラーコード:"+error.code+")"); 68 break; 69 } 70 } 71 ); 72 // Geolocation APIに対応していない 73 } else { 74 alert("この端末では位置情報が取得できません"); 75 } 76 } 77 78 </script> 79 80 </head> 81 82 <body> 83 <header> 84 <td align="center">xxxxxxxxxxxxxxxxx</td> 85 </header> 86 <aside></aside> 87 <main> 88 89 <div id="map" style="width:400px; height:300px"></div> 90 91 </main> 92 93 <footer></footer> 94 95 </body> 96 97</html>

以上、ご回答お待ちしております。

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

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

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

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

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

colling

2018/11/18 12:21 編集

function initMap() の閉じ } までお願いします。
dai__

2018/11/18 12:30

修正致しました。あと、もともと<script>の囲い方が変だったので、修正したところ、今度はinitMap is not a functionエラーになりました。
colling

2018/11/18 12:35

今のコードを見ている限りだとスクリプトの開始タグ<script>がないのと、function initMap() { が2回出てきていますが、、、。
dai__

2018/11/18 12:38

失礼しました。ソースコード修正しました。対策の方向性が間違っていました。上記のコメントは無視してください。this.lat is not a functionエラーです。
guest

回答2

0

google Map API を読み込んでいないからではないでしょうか?

javascript

1<script src="https://maps.googleapis.com/maps/api/js?key=あなたのAPI_key"></script> 2

--追記--
initMap()を呼び出している箇所が見当たらないのですが、

もし、質問に追記されたコードの<script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxx"></script>の部分で&callback=initMapを指定しているならば、

<script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxx"></script>
は、
<div id="map" style="width:400px; height:300px"></div>
よりも後ろに持って行ってください。

投稿2018/11/18 12:45

編集2018/11/18 13:46
colling

総合スコア798

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

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

dai__

2018/11/18 12:53

回答ありがとうございます。上記のようなソースコードに修正しましたところ、今度はinitMap is not a functionという結果になってしましました。jQueryとgoogle mapの2つ宣言しているところがいけないのでしょうか?ちなみに、該当のソースコードは、従来は、body内にて宣言していたものをheadにもってきたかたちです。
colling

2018/11/18 13:00

<script></script>は毎回きちんと閉じていれば、いくつあっても大丈夫です。
colling

2018/11/18 13:10 編集

initMap is not a functionは、initMap() のファンクションがない というエラーですが、、、。 質問のコードは、実際にエラーが起こっているコードのままですか? 今のコードだと、initMap()を呼び出してすらいないので initMap is not a function が出るはずないのですが、、
dai__

2018/11/18 13:11

はい。そのコードのままコピペで記載しておりますので間違いございません。なぜでしょうか、、、ただ、厳密にいうと、エラーは、 Uncaught(in promise) Ic{message:"initMap is not a function"、、、、}みたいになっております。 私の見方がおかしいのかもしれません。
guest

0

中身は見ていませんが。

HTML

1 <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script><!-- 閉じタグが抜けている --> 2<!-- このエリア削除 3 // 現在地取得処理 4 function initMap() { 5 // Geolocation APIに対応している 6 if (navigator.geolocation) { 7 // 現在地を取得 8 navigator.geolocation.getCurrentPosition( 9 // 取得成功した場合 10このエリア削除 --> 11 <script><!-- 開始タグが抜けている --> 12 function initMap() { 13 // Geolocation APIに対応している 14 if (navigator.geolocation) { 15 // 現在地を取得 16 navigator.geolocation.getCurrentPosition( 17 // 取得成功した場合 18 19 function(position) { 20 // fetch({{ url('/distance') }}, { 21 // method: 'POST', 22 // body: { 23 // distance: position 24 // } 25 // }) 26 // // 自分の緯度・経度を変数に格納 27 mapLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 28 29 console.log(mapLatLng); 30 31 // mapLatLngの値をPHPへ渡す 32 jQuery.ajax({ 33 type: "POST", 34 url: "send.php", 35 data: {"item1":mapLatLng }, 36 success: function(html){ 37 alert(html); 38 } 39 }) 40 41 // // マップオプションを変数に格納 42 var mapOptions = { 43 zoom : 15, // 拡大倍率 44 center : mapLatLng // 緯度・経度 45 }; 46 // マップオブジェクト作成 47 var map = new google.maps.Map( 48 document.getElementById("map"), // マップを表示する要素 49 mapOptions // マップオプション 50 ); 51 // マップにマーカーを表示する 52 var marker = new google.maps.Marker({ 53 map : map, // 対象の地図オブジェクト 54 position : mapLatLng // 緯度・経度 55 }); 56 }, 57 58 // 取得失敗した場合 59 function(error) { 60 // エラーメッセージを表示 61 switch(error.code) { 62 case 1: // PERMISSION_DENIED 63 alert("位置情報の利用が許可されていません"); 64 break; 65 case 2: // POSITION_UNAVAILABLE 66 alert("現在位置が取得できませんでした"); 67 break; 68 case 3: // TIMEOUT 69 alert("タイムアウトになりました"); 70 break; 71 default: 72 alert("その他のエラー(エラーコード:"+error.code+")"); 73 break; 74 } 75 } 76 ); 77 // Geolocation APIに対応していない 78 } else { 79 alert("この端末では位置情報が取得できません"); 80 } 81 } 82 83 </script>

投稿2018/11/18 12:39

kei344

総合スコア69364

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

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

dai__

2018/11/18 12:42

失礼しました。閉じタグ抜けと二重コードは私の表記ミスです。ですので、上記のようにしてもエラーはそのままです。
kei344

2018/11/18 12:57

問題が起きているコードを正しく提示してください。&callback=initMapが指定されていない以上、提示されているコードはエラーも起こさないはずです。
dai__

2018/11/18 13:08

どこが問題かわからないのですべてそのまま記述致します。ちなみに別のかたからご指摘があり、google map apiを読み取ったところ、エラーがinitMap is not a functionとなりました。エラーの中にcallbackとい文字列が見えるのですが、google map APIの中にデフォルトで入っているものでしょうか?
kei344

2018/11/18 13:11

> エラーの中にcallbackとい文字列が見えるのですが エラー文も省略せず提示されてはいかがでしょうか。
dai__

2018/11/18 13:17

これでどうでしょうか?すみません、APIキー等どこまで個人情報をだしていいのかも知識がないので遅れ遅れで申し訳ございません。
kei344

2018/11/18 14:09

APIキーは伏せればよいです。 提示のものをHTMLファイルとしてサーバに置き、エラーが出るか確認してみてください。&callback=initMapが指定されていない以上、提示されているコードはエラーも起こさないはずです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問