Ruby on Rails - Объекты геокодирования в качестве маркера маркера google

Question

В настоящее время я разрабатываю инструмент отслеживания продаж и застревает при отображении массива маркеров для геокодированных объектов на карте. Я использую функцию геокодера для поиска геокодированных объектов на расстоянии 0,5 км от моего местоположения, прошедшего через URL. Мой текущий код работает до тех пор, пока в этом радиусе есть только один объект, и я знаю, что мне нужно использовать массив для отображения более одного объекта, но за последние две недели я застрял в этом.

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 %> 

Путь приложение устанавливается там будет не более двух или 3-х объектов, в то время, и я знаю, что JSON это вариант, но я надеюсь, что был бы способ избежать этого. Все ресурсы, которые я читал о массивах карт, включают в себя ручную передачу параметров массивов, но мне нужно сделать это динамически, видя, что объект будет варьироваться от rep до rep.

Заранее благодарим за любую помощь.

Answer 1

Вы смешиваете свой Javascript с кодом Ruby таким образом, чтобы это не имело никакого смысла. Причина, по которой он работает с одним, заключается в том, что когда вы выполняете его с помощью одного объекта в массиве @locations, он запускается один раз и выводит этот Javascript правильно. Когда у него есть> 1 объект, он в основном дублирует содержимое вашего метода Javascript initMap.

Предполагая, что вы используете 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-цикл для маркеров и infowindows. Я ничего не изменил в своем контроллере, и приведенный ниже код показан ниже.

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); 
    } 
}