Ruby on Rails - Googleマップマーカー配列としてのジオコーダーオブジェクト

Question

私は現在、販売担当者追跡ツールを開発しており、ジオコードされたオブジェクトのマーカー配列を地図に表示していません。私はジオコーダーの近くの関数を使用して私の場所からURLを渡された地点のオブジェクトを0.5km見つけました。私の現在のコードは、その半径内にオブジェクトが1つしかない限り動作し、2つ以上のオブジェクトを表示するために配列を使用する必要があることを知っていますが、これは過去2週間にわたって固まっています。

stores_controller.rb 
def index 
    @latitude = params[:latitude].to_f 
    @longitude = params[:longitude].to_f 
    @stores = current_user.stores 
    @locations = @stores.near([@latitude, @longitude], 0.5) 
end 

私の店/ index.html.erb

function initMap() { 
    <% @locations.each do |store| %> 
    var lat = <%= store.latitude %> 
    var lng = <%= store.longitude %> 
    var mylatlng = {lat: lat, lng: lng} 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 15, 
     center: mylatlng 
    }); 

    var marker = new google.maps.Marker({ 
     position: mylatlng, 
     map: map, 
     animation: google.maps.Animation.DROP, 
    }); 
     google.maps.event.addListener(marker, 'click', function() { 
     var c = confirm('Would you like to visit this store?') 
     if (c === true) { 
     window.location.href = '<%= store_path(store) %>'; 
     } 
     if (c === false) { 
     window.location.href = '<%= dashboard_path %>'; 
     } 

    }); 

    var contentString = 'Please click on this Marker to visit' + ' ' + '<%= store.storename %>'; 

    var infowindow = new google.maps.InfoWindow({ 
     content: contentString 
    }); 
    google.maps.event.addListenerOnce(map, 'tilesloaded', function() { 
    infowindow.open(map, marker); 
    }); 
    } 
    <% end %> 

アプリは一度に最大2つのまたは3つのオブジェクトであるだろう設定し、私はJSONことを知っている途中でマップオプションですが、それを避ける方法があることを期待しています。私がマップ・アレイについて読んだリソースはすべて、手作業で配列パラメーターを渡す必要がありますが、動的に行う必要があります。つまり、オブジェクトがrepからrepに変わるように見えます。

ありがとうございました。

Answer 1

JavascriptをあなたのRubyコードとミックスしているのは意味をなさない方法です。なぜなら、@locations配列内の単一オブジェクトで実行すると、一度実行され、そのJavaScriptを正しく出力するからです。オブジェクトが1つ以上ある場合、基本的にはinitMap JavaScriptメソッドのコンテンツを複製しています。あなたはjQueryのを使用していると仮定すると、

は、ここに働くだろう方法です：

<%- @locations.map {|store| "<div id='store_#{store.id}' class='store-object' data-latitude='#{store.latitude}' data-longitude='#{store.longitude}' data-name='#{store.name}' data-path='#{store_path(store)}'></div>".html_safe} %> 

function initMap() { 
    var $stores = $(".store-object"); 
    $stores.each(function() { 
    var lat = $(this).data("latitude"); 
    var lng = $(this).data("longitude"); 
    var mylatlng = {lat: lat, lng: lng} 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 15, 
     center: mylatlng 
    }); 

    var marker = new google.maps.Marker({ 
     position: mylatlng, 
     map: map, 
     animation: google.maps.Animation.DROP, 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 
     var c = confirm('Would you like to visit this store?') 
     if (c === true) { 
     window.location.href = $(this).data("path"); 
     } 
     if (c === false) { 
     window.location.href = '<%= dashboard_path %>'; 
     } 
    }); 

    var contentString = 'Please click on this Marker to visit' + ' ' + $(this).data("name"); 

    var infowindow = new google.maps.InfoWindow({ 
     content: contentString 
    }); 

    google.maps.event.addListenerOnce(map, 'tilesloaded', function() { 
     infowindow.open(map, marker); 
    }); 
    }); 
} 

Answer 2

あなたは正しい方向に私を指しているため@Orlandoありがとうございました。 JSONとJSループをマーカーとインフォウィンドウに使用することで、私の問題を解決することができました。私は私のコントローラで何も変更していないし、改訂されたコードは以下に示されている。

var map; 

function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
     center: {lat: <%= params[:latitude] %>, lng: <%= params[:longitude] %>}, 
     zoom: 18, 
     scrollwheel: false, 
}); 

var json = <%= raw @locations.map.to_json {|store|}.html_safe %>; 

for (var i = 0, length = json.length; i < length; i++) { 
var data = json[i], 
    LatLng = {lat: data.latitude, lng: data.longitude}; 

var marker = new google.maps.Marker({ 
position: LatLng, 
map: map, 
animation: google.maps.Animation.DROP 
}); 

google.maps.event.addListener(marker, 'click', function() { 
     var c = confirm('Would you like to visit this store?') 
     if (c === true) { 
     window.location.href = "stores/" + data.id; 
     }  
     if (c === false) { 
     window.location.href = '<%= dashboard_path %>'; 
     } 
    }); 

    var infowindow = new google.maps.InfoWindow(); 
    infowindow.setContent('Click the Marker to visit' + ' ' + data.storename); 
    infowindow.open(map, marker); 
    } 
}