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

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

ただいまの
回答率

89.07%

【Gmaps4Rails】マーカー位置から座標取得と保存方法を知りたい

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,078

besuko

score 16

環境

Ruby 2.1.0
Rails 4.1.0
geocoder 1.3.7
gmaps4rails 2.1.2

GoogleMapsでマーカー位置座標の取得

Railsで店舗検索サイトを作成しています。
GoogleMaps表示にはgmaps4railsを用いています。

店舗情報は店舗が直接入力出来るようにしています。
gemgeocoderを用いて入力してもらった住所から緯度・経度を自動で取得し、GoogleMapsにマーカーを落とすようにしましたが実際の位置とはズレている事が多いです。

位置にズレがある場合は編集ページ(shop/edit.html.erb)で補正する方法はありませんでしょうか。
GoogleMapsに表示されるマーカーを直接動かして、その位置の緯度・経度を取得しデータベースに保存できればベストだと考えています。

マーカー位置をドラッグでの移動は出来ましたが、緯度・経度の再取得とデータベースでの更新方法が分からずにいます。

なんとなく、更新時もgeocoderが作動して住所から自動で取得された座標が反映されてしまっている気もしますが。。

shops_contrller.rb
  def edit
    @shop = Shop.find(params[:id])
    @hash = Gmaps4rails.build_markers(@shop) do |shop, marker|
        marker.lat shop.latitude
        marker.lng shop.longitude
        marker.infowindow shop.name
        marker.json({ title: shop.name })
    end
    respond_with(@shop)
  end
view/shops/edit.html.erb
  <script type="text/javascript">
    handler = Gmaps.build('Google');
    //データベースに保存されている座標を取得
    handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
      var markers = handler.addMarkers(<%= raw @hash.to_json %>,{draggable: true});
      handler.bounds.extendWith(markers);
      handler.fitMapToBounds();
    });

//add markers to original json
_.each(<%= raw @hash.to_json %>, function(json, index){
  json.marker = markers[index];
});

//add dragend event to markers, triggered when you drop them
_.each(<%= raw @hash.to_json %>, function(json){
  google.maps.event.addListener(json.marker.getServiceObject(), "dragend", function(event) {
    var lat = event.latLng.lat();
    var lng = event.latLng.lng();
    console.log('Marker with id: ' + json.id + ' dropped hat lat: ' + lat + ' and lng: ' + lng)
  });
});
</script>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

0

gmaps4rails を使用したドラッグ後のマーカーを取得するには下記URLの手法があるようです。

【ruby on rails - Create Draggable Markers and save them in the Database - Stack Overflow】
http://stackoverflow.com/questions/22185404/create-draggable-markers-and-save-them-in-the-database?answertab=active#tab-top

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/07/15 17:45

    kei344様

    早々にご回答頂き有難うございます!

    早速URLの内容を元にJavaScriptを訂正致しました。
    ですが位置情報は更新されずにおります。。

    もし分かれば間違い箇所を教えて頂けませんでしょうか。。

    ```
    view/shops/edit.html.erb

    <script type="text/javascript">
    handler = Gmaps.build('Google');
    //データベースに保存されている座標を取得
    handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
    var markers = handler.addMarkers(<%= raw @hash.to_json %>,{draggable: true});
    handler.bounds.extendWith(markers);
    handler.fitMapToBounds();
    });

    //add markers to original json
    _.each(<%= raw @hash.to_json %>, function(json, index){
    json.marker = markers[index];
    });

    //add dragend event to markers, triggered when you drop them
    _.each(<%= raw @hash.to_json %>, function(json){
    google.maps.event.addListener(json.marker.getServiceObject(), "dragend", function(event) {
    var lat = event.latLng.lat();
    var lng = event.latLng.lng();
    console.log('Marker with id: ' + json.id + ' dropped hat lat: ' + lat + ' and lng: ' + lng)
    });
    });
    </script>

    キャンセル

  • 2016/07/15 18:00

    gmaps4rails の環境が手元に無いため、どのようなエラーが起こっているとか、指定がおかしいなどがわかりません。

    とりあえず markers には marker が配列で入っており、それぞれを marker.getServiceObject() することによってGoogleMapsの marker オブジェクトが取得できるはずなので、クリックイベントでも付けて試してみてください。

    http://stackoverflow.com/questions/24004108/googlemaps4rails-not-centering-first-marker?answertab=active#tab-top

    キャンセル

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

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

関連した質問

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