Mehrere Markerfarben mit Gmaps4Rails - Ruby-on-Rails, Ruby, Google Maps, gmaps4rails

Ich verwende Gmaps4Rails, um eine Google-Karte anzuzeigenmit Markern. Ich habe die Karte in Betrieb und sie zeigt eine rote Markierung für jede in meinem Modell gespeicherte Adresse. Ich versuche etwas Außergewöhnliches zu tun, deshalb hier die kurze Erklärung meiner Ziele:

Bei den meisten Karten eine Farbe pro Standort auf der Karteist gut. Wenn Sie beispielsweise Restaurants auf einer Karte auflisten, würden Sie alle Markierungen für Pizza Rot, Chinesisch Blau, Hamburger Grün usw. festlegen. Leider funktioniert das in meinem Fall nicht: Ich muss mehrere Farben haben Stellen Sie sich vor, wenn Restaurants nicht in eine Kategorie passen: Wenn in einem Restaurant mexikanisches Essen, Pizza und Hamburger serviert werden, dann brauchen Sie diesen Standort mit einer roten, blauen und grünen Markierung. Hier habe ich Probleme.

Die Lösung, die ich mir ausgedacht habe, ist, die Basismarkierung hinzuzufügen und jede zusätzliche Markierung (neue Farbe) um einige Pixel höher hinzuzufügen, so dass der Benutzer die Oberseite jeder neuen farbigen Markierung sehen kann.

Ist dies der beste Weg, um meine Ziele zu erreichen? Wenn ja, wo fange ich an? Ich bin nicht sicher, was ich tun soll - Gmaps4Rails macht das sehr einfach, aber ich weiß nicht, was ich über die Grundlagen hinaus tun soll.

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/><a href="#{location_path(location)}">Location Details</a>"
end

_map.js.erb

<!-- Google Maps JS -->
<script src="http://maps.google.com/maps/api/js?v=3.13&amp;sensor=false&amp;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>

Antworten:

Sie können es auf diese Weise tun. Fügen Sie Hash "Bild" zu @hash hinzu.

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

1. Im Controller können Sie die Kategorien der Küche überprüfen.

2. Fügen Sie den Bildpfad mit den entsprechenden Farben hinzu.

3. Fügen Sie es der Karte genau so hinzu, wie Sie es tun.

Eine andere Option könnte darin bestehen, Breitengrad und Längengrad mit den gleichen Informationen ein wenig zu ändern. Dies scheint jedoch keine gute Lösung zu sein.