質問: "https://maps.google.co.jp/maps?output=embed&q=" + latlng.lat + "," + latlng.lng; console.log(googlemap); } function errorCallback(error) { console.log(error); } // 第一引数:住所、 第二引数:コールバックされる緯度と経度、 第三引数:エラー内容 getLatLng(gon.address, Callback, errorCallback ); document.getElementById('exec').addEventListener('click', () => { if (document.getElementById('address').value) { getLatLng(document.getElementById('address').value, (latlng) => { map.setCenter(latlng) }) } }) }); /* Ajax通信 */ $(function () { $.ajax({ url: "http://localhost:3000/users/" + gon.userid, type: "GET", data: { gmap: googlemap } // 問題の箇所・・取得できていないのか値が渡されない・・ }) .done(function (data, textStatus, jqXHR) { console.log("接続が成功"); console.log(googlemap); // ここではconsoleに表示され取得できている・・ }) .fail(function() { console.log("接続失敗"); }); }); ``` ▼application.html.erb ``` ・・・ ``` ▼コンソール出力結果 ![実行結果](https://i.stack.imgur.com/jOUYI.jpg)
回答: コールバック関数を使うにもかかわらず、そのコールバックで取得できる値(今回は`latlng`)をグローバル変数(今回は`googlemap`)を介してプログラム上の他のあちこちの部分と共有するのは間違ったアプローチです。(コードの書き方によりますが、タイミングによってはうまくいくときもあればうまくいかないときもあるなどの挙動を目にすることになるでしょう) それでは、どうすれば良いかというと ``` function Callback(latlng) { console.log(latlng.addr); console.log(latlng.lat); console.log(latlng.lng); console.log(); // 変数宣言もグローバルではなく、ここに変更 var googlemap = "https://maps.google.co.jp/maps?output=embed&q=" + latlng.lat + "," + latlng.lng; // ここに googlemap変数を使った処理を書いてください } ``` グローバル変数は廃止して、私がコメントで示したところに ajax の処理をもってくるとうまく動くはずです(そもそもajaxの処理関係がうまく動けばですが、localhost等こちらで用意できていないので確かめておりません。ご了承ください)。 余談ですが、このコールバックの中にどんどん処理を書いていくとインデントが深くなっていくのが通称「コールバック地獄」です。「コールバック地獄(英語ではcallback hell)」で検索するとより理解が深まるかもしれません。(おそらく多くの人が苦戦する学習上のひとつの壁だと考えています)