69377


[実現したいこと]  
住所を元に作成したgooglemapを無料で埋め込みたい。

[経緯/考察]  
Google ApiのGeocodingは有料とのことでしたので、色々と探していたところ  
無料で緯度経度を検索できる「[Community
Geocoder](https://blog.geolonia.com/2020/06/01/community-
geocoder.html)」なるものを見つけたので  
こちらを利用してjavascriptで緯度経度を求めました。  
しかしjavascriptの変数をRubyへ送ることが容易にはできないことを知り  
Ajaxを使用してできないものか探っていました。  
（Ajaxについては超初心者ですので・・理解しきれていないのですが・・）

[困っていること・・]  
Ajax通信成功時に、dataの受け渡しパラメータをコントローラーに送信できることを知ったので  
この挙動を利用して、緯度経度の取得後にAjax通信実行で送信できないかどうか  
テストしてみたものの、送信できなくて困っています。

**グローバル変数に緯度経度を付加したgooglemap用のurlを格納したので  
これをパラメータとして送信できないか試しているのですが、どうもダメな状況です・・**

やり方が良くないかもしれませんが・・  
他に良い方法が今のところ難しくてわからない状況です・・  
良い方法や、修正/改善方法などご教授いただければ幸いです。  
よろしくお願いいたします。

※userデータ取得用に、gemのgonも使用しております。  
※現状はAjaxの為のroutes設定やjs.erbの作成は省いております。

▼users_controller.rb

[code]

    def show
      gon.address = @user.address
      gon.userid = @user.id
    
      # 戻り先パラメータ（これを利用してhtml.erbでMapを表示したい）
      @gmap = params[:gmap]
    end
    
[/code]

▼application.js

[code]

    var googlemap;　// googlemap用のurl格納先
    
    /* 緯度経度の検索 */
    $(function () {
      function Callback(latlng) {
        console.log(latlng.addr);
        console.log(latlng.lat);
        console.log(latlng.lng);
        console.log();
        
        googlemap = "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("接続失敗");
        });
    });
    
[/code]

▼application.html.erb

[code]

    <head>
      ・・・
      <!-- Community GeocoderのAPI読み込み -->
      <script src="https://cdn.geolonia.com/community-geocoder.js"></script>
    </head>
    
[/code]

▼コンソール出力結果  
[![実行結果](https://i.stack.imgur.com/jOUYI.jpg)](https://i.stack.imgur.com/jOUYI.jpg)


CC BY-SA 4.0
2020-08-08T21:38:15.220
69375
2020-08-08T23:28:11.470
2020-08-08T22:19:07.500
40948
40948
question
javascript ruby-on-rails ruby jquery ajax
railsにて地図の緯度経度を使用したい為にAjax通信を用いたがコントローラーへ値が送信できない


コールバック関数を使うにもかかわらず、そのコールバックで取得できる値（今回は`latlng`）をグローバル変数（今回は`googlemap`）を介してプログラム上の他のあちこちの部分と共有するのは間違ったアプローチです。（コードの書き方によりますが、タイミングによってはうまくいくときもあればうまくいかないときもあるなどの挙動を目にすることになるでしょう）

それでは、どうすれば良いかというと

[code]

    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変数を使った処理を書いてください
    }
    
[/code]

グローバル変数は廃止して、私がコメントで示したところに ajax
の処理をもってくるとうまく動くはずです（そもそもajaxの処理関係がうまく動けばですが、localhost等こちらで用意できていないので確かめておりません。ご了承ください）。

余談ですが、このコールバックの中にどんどん処理を書いていくとインデントが深くなっていくのが通称「コールバック地獄」です。「コールバック地獄（英語ではcallback
hell）」で検索するとより理解が深まるかもしれません。（おそらく多くの人が苦戦する学習上のひとつの壁だと考えています）


CC BY-SA 4.0
2020-08-08T22:55:12.680
69377
2020-08-08T23:28:11.470
2020-08-08T23:28:11.470
9008
9008
69375
answer