- リスト実現したいこと:
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>
以上、ご回答お待ちしております。