Multiple marker colors with Gmaps4Rails - ruby-on-rails

Question

I am using Gmaps4Rails to display a google map with markers. I have the map working and it displays one red marker per address saved in my model. I am trying to do something a little out of the ordinary, so here's the brief explanation of my goals:
With most maps, one color per location on the map is fine. For example, if you are listing restaurants on a map, you would make all of the markers for pizza red, Chinese blue, Hamburgers green, etc... Unfortunately, this doesn't work in my case: I need to have multiple colors per location. Imagine if restaurants didn't fit nicely in one category: If one restaurant may serve mexican, pizza and hamburgers - then, you need that location to have a red, blue and green marker. This is where I'm having problems.
The solution I have come up with is to add the base marker, then add each additional marker (new color) several pixels higher, so the user can see the top of each new colored marker.
Is this the best way to accomplish my goals? If so, where do I begin? I'm not sure what to do - Gmaps4Rails makes this very easy, but I don't know what to do beyond the basics.
restaurant_controller.rb
#locations = Location.search(params[:search]).order('created_at desc')
#hash = Gmaps4rails.build_markers(#locations) do |location, marker|
marker.lat location.latitude
marker.lng location.longitude
marker.infowindow "<b>#{location.name}</b>
<br/><i>#{location.address}</i>
<br/><i>#{location.city} #{location.state}., #{location.zip}</i>
<p/>#{location.services.map{|service| service.name }.join(', ') }
<p/>Location Details"
end
_map.js.erb
<!-- Google Maps JS -->
<script src="http://maps.google.com/maps/api/js?v=3.13&sensor=false&libraries=geometry" type="text/javascript"></script>
<script src='http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js' type='text/javascript'></script>
<script language="javascript" 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();
});
</script>

Answer 1

You can do it this way Add hash "picture" to #hash like this.
lat: latitude_of_location,
lng: longitude_of_location,
picture: {
url: "url of image",
width: 36,
height: 36
},
infowindow: "Add all the details you want to add here"
});
In the controller you can check the categories of the cuisine served.
Add the image path which has appropriate colors.
Add it to the map just the way you are doing it.
Another option might be to change the latitude and longitude a little bit with the same information. but this does not seem a good solution.