when mouseover or out change icon marker - ruby-on-rails

Question

What i want is when user do mouseover (hover) then the icon change. My code is below:
handler = Gmaps.build("Google", {
markers: {
maxRandomDistance: null
}
});
handler.buildMap({
provider: {},
internal: {
id: "map-canvas"
}
}, function() {
var markers;
markers = handler.addMarkers(ar);
_.each(ar, function(json, index) {
json.marker = markers[index];
$(".location-" + json.id).on("mouseover", function() {
json.picture = {
url: "http://maps.google.com/mapfiles/ms/icons/green-dot.png",
width: 36,
height: 36
};
json.marker.setMap(handler.getMap());
json.marker.panTo();
handler.removeMarker(json.marker);
handler.addMarker(json);
}).on("mouseout", function() {
json.picture = '';
handler.removeMarker(json.marker);
handler.addMarker(json);
});
});
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
});
Using this code, the color of the marker can change from red to green. However, when the user remove their mouse from the hover area, the color does not change back to the original color. Please can anyone suggest me on this issue?
Thanks

Answer 1

Hai thank for #apneadiving answer. I modify my code to this
hoverPicture = {
url: "http://maps.google.com/mapfiles/ms/icons/green-dot.png",
width: 33,
height: 33
};
handler = Gmaps.build("Google", {
markers: {
maxRandomDistance: null
}
});
handler.buildMap({
provider: {},
internal: {
id: "map-canvas"
}
}, function() {
var markers;
markers = handler.addMarkers(ar);
_.each(ar, function(json, index) {
var gr;
json.marker = markers[index];
gr = {};
gr.marker = void 0;
$(".location-" + json.id).on("mouseover", function() {
gr = {
lat: json.lat,
lng: json.lng,
picture: hoverPicture
};
json.marker.panTo();
handler.removeMarker(json.marker);
gr.marker = handler.addMarker(gr);
}).on("mouseout", function() {
handler.removeMarker(gr.marker);
json.marker = handler.addMarker(json);
});
});
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
});
So the new icon need to insert to variable after addMarker

Answer 2

Try something like:
_.each(ar, function(json, index) {
var json.marker = markers[index];
var initialPicture = json.picture;
var hoverPicture = {
url: "http://maps.google.com/mapfiles/ms/icons/green-dot.png",
width: 36,
height: 36
}
$(".location-" + json.id).on("mouseover", function() {
json.picture = hoverPicture;
json.marker.setMap(handler.getMap());
json.marker.panTo();
handler.removeMarker(json.marker);
handler.addMarker(json);
}).on("mouseout", function() {
json.picture = initialPicture;
handler.removeMarker(json.marker);
var newMarker = handler.addMarker(json);
json.marker = newMarker;
});
});