Rails, gmaps4rails: Accessing javascript variable from within partial - ruby-on-rails

Question

Users can post 'notices' and these are displayed in users/show.html.erb in their 'notice feed'. Each notice has a :latitude and a :longitude and an associated marker on a google map.
I'm trying to make the marker change colour when the user hovers over the notice in the feed. I've given the marker the same id as the notice with marker.json({ id: notice.id }). In the notice partial, each notice is uniquely identified by its id: <li id="notice-<%= notice.id %>">. The problem is accessing 'markers' from within the notice partial. I want to use the code markers[<%= notice.id %>] but how do I pass 'markers' from the show javascript to the partial javascript?
Alternatively, I could do it all inside the show javascript, but the problems remains: how would I access the notice id from within the show javascript?
Users_controller.rb:
def show
#notice = #character.notices.build
#notice_feed_items = current_user.notice_feed.paginate(page: params[:notices_page])
#hash = Gmaps4rails.build_markers(#notice_feed_items) do |notice, marker|
marker.lat notice.latitude
marker.lng notice.longitude
marker.infowindow notice.content
marker.json({ id: notice.id })
end
redirect_to root_url and return unless #user.activated
end
users/show/html.erb:
<% if #notice_feed_items.any? %>
<ol class="posts">
<%= render #notice_feed_items %>
</ol>
<%= will_paginate #notice_feed_items, param_name: 'notices_page' %>
<% end %>
<script type="text/javascript">
handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
markers = handler.addMarkers(<%=raw #hash.to_json %>);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
map = handler.getMap();
var update_timeout = null;
google.maps.event.addListener(map, 'click', function(event){
update_timeout = setTimeout(function(){
placeMarker(event.latLng);
fillInForm(event.latLng);
document.getElementById("dropfield").focus();
}, 300);
});
google.maps.event.addListener(map, 'dblclick', function(event) {
clearTimeout(update_timeout);
});
});
function placeMarker(latLng) {
var marker = new google.maps.Marker({
position: latLng,
map: map,
draggable: false
});
}
function fillInForm(latLng) {
$('#notice_latitude').val(latLng.lat());
$('#notice_longitude').val(latLng.lng());
}
</script>
_notice.html.erb:
<li id="notice-<%= notice.id %>">
.
.
.
</li>
<script type="text/javascript">
document.getElementById("notice-<%= notice.id %>").onmouseover=function(){
markers[<%= notice.id %>].setIcon("markers/blue_MarkerA.png");
}
document.getElementById("notice-<%= notice.id %>").onmouseout=function(){
markers[<%= notice.id %>].setIcon("markers/yellow_MarkerA.png");
}
</script>
EDIT:
I'm trying to solve the problem by doing it all in show.html.erb with the following code, using grep:
<script type="text/javascript">
handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
markers = handler.addMarkers(<%=raw #hash.to_json %>);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
map = handler.getMap();
var update_timeout = null;
google.maps.event.addListener(map, 'click', function(event){
update_timeout = setTimeout(function(){
placeMarker(event.latLng);
fillInForm(event.latLng);
document.getElementById("dropfield").focus();
}, 300);
});
google.maps.event.addListener(map, 'dblclick', function(event) {
clearTimeout(update_timeout);
});
});
function placeMarker(latLng) {
var marker = new google.maps.Marker({
position: latLng,
map: map,
draggable: false
});
}
function fillInForm(latLng) {
$('#notice_latitude').val(latLng.lat());
$('#notice_longitude').val(latLng.lng());
}
$("#notice_list li").on('mouseenter', function(){
var id = $(this).attr('id');
$.grep(markers, function(m){return m.id == id;})[0].setIcon("markers/blue_MarkerA.png");
}).on('mouseleave', function(){
var id=$(this).attr('id');
$.grep(markers, function(m){return m.id == id;})[0].setIcon("markers/yellow_MarkerA.png");
});
</script>
... but it isn't working. I think the problem is that trying to access the id of each marker in markers with m.id isn't working. I tried to get it to print out markers[0].id but nothing happened, it seems you can't access the marker id with markers[0].id?! (I checked markers.length wasn't zero. It wasn't - the map is full of markers).
So, how do you access the id of an element of markers if markers[0].id doesn't work??

Answer 1

marker haven't id attribute. To have a reference of each marker you could use the index of the markers array (adding markers one per one).
# pseudocode
<% #notice_feed_items.each do |item| %>
markers[<%= item.id %>] = handler.addMarker(<%=raw item.to_json %>);
<% end %>