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

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

ただいまの
回答率

88.92%

rails googlemap クリックしたオブジェクト毎のピンに移動したい

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 630
退会済みユーザー

退会済みユーザー

前提・実現したいこと

railsでテニスコート検索アプリを作成中です。
コート情報の配列である@courtsオブジェクトをeach doを使ってそれぞれ表示させてます。
表示させたコート情報をクリックした時にそのコートのピンに移動させたいです。
コート情報を一覧で表示して、マップにピンを表示させるまでは実装できました。

発生している問題・エラーメッセージ

現状のコードだと最後に読み込まれた緯度経度をもとにPantoが作動してしまいます。
コート一覧でクリックしたコートオブジェクトの緯度経度を取得してPantoしたいです。

該当のソースコード

#index.html.erb
            <% @courts.each do |court|%>
              <div class="index">
                <div class="court-info">
                  <p class="txtm">コート名:<%=court.name %></p>
                  <p class="txtm">住所:<%=court.address %></p>
                  <input class="lat" name="latlng" type="hidden" value="<%= court.latitude %>"></input>
                  <input class="lng" name="latlng" type="hidden" value="<%= court.longitude %>"></input>
                </div>
              </div>
            <%end%>

            <script>
              var map;
              var marker = [];
              var infoWindow = [];
              var test = <%= @courts_m.to_json.html_safe %>;

                var mapLatLng = new google.maps.LatLng({lat: test[0]['latitude'], lng: test[0]['longitude']}); // 緯度経度のデータ作成

                map = new google.maps.Map(document.getElementById('sample'), { // #sampleに地図を埋め込む
                  center: mapLatLng, // 地図の中心を指定
                  zoom: 10 // 地図のズームを指定
                });

                // マーカー毎の処理
                for (var i = 0; i < test.length; i++) {
                  markerLatLng = new google.maps.LatLng({lat: test[i]['latitude'], lng: test[i]['longitude']}); // 緯度経度のデータ作成
                  marker[i] = new google.maps.Marker({ // マーカーの追加
                    position: markerLatLng, // マーカーを立てる位置を指定
                    map: map // マーカーを立てる地図を指定
                  });

                  infoWindow[i] = new google.maps.InfoWindow({ // 吹き出しの追加
                    content: '<div class="sample">' + test[i]['name'] + '</div>' // 吹き出しに表示する内容
                  });

                  markerEvent(i); // マーカーにクリックイベントを追加
                }

                // マーカーにクリックイベントを追加
                function markerEvent(i) {
                  marker[i].addListener('click', function() { // マーカーをクリックしたとき
                    infoWindow[i].open(map, marker[i]); // 吹き出しの表示
                  });
                }

                $('.court-info').on('click', function() {
                  lat = $('.lat').val();
                  lng = $('.lng').val();
                  toTokyo(lat,lng);
                });

                function toTokyo(lat,lng) {
                  map.panTo(new google.maps.LatLng(lat,lng));
                }

            </script>

試したこと

コード記載のように、inputタグをhiddenにすることで変数を置いてますが、これだとどのコートをクリックしても最後のコートに移動してしまいます。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

$( '.court-info' ).on( 'click', function() {
  toTokyo( $( '.lat', this ).val(), $( '.lng', this ).val());
} );

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/19 06:55

    回答ありがとうございます。

    ```
    $('li.court-info').on('click',function(){
    var index = $('li.court-info').index(this);

    lat = test[index]['latitude']
    lng = test[index]['longitude']

    move(lat,lng);
    });
    ```
    とすることで解決しました。

    キャンセル

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

  • ただいまの回答率 88.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る