/ / Várias cores de marcador com Gmaps4Rails - ruby-on-rails, ruby, google-maps, gmaps4rails

Várias cores de marcador com Gmaps4Rails - ruby-on-rails, ruby, google-maps, gmaps4rails

Estou usando o Gmaps4Rails para exibir um mapa do googlecom marcadores. Eu tenho o mapa funcionando e exibe um marcador vermelho por endereço salvo no meu modelo. Eu estou tentando fazer algo um pouco fora do comum, então aqui está a breve explicação dos meus objetivos:

Com a maioria dos mapas, uma cor por localização no mapaestá bem. Por exemplo, se você está listando restaurantes em um mapa, você faria todos os marcadores para vermelho pizza, azul chinês, verde hambúrguer, etc ... Infelizmente, isso não funciona no meu caso: eu preciso ter várias cores por local. Imagine se os restaurantes não se encaixam bem em uma categoria: se um restaurante pode servir mexicano, pizza e hambúrgueres - então, você precisa que o local tenha um marcador vermelho, azul e verde. É aqui que estou tendo problemas.

A solução que tenho é adicionar o marcador de base, em seguida, adicionar cada marcador adicional (nova cor) vários pixels mais alto, para que o usuário possa ver o topo de cada novo marcador colorido.

Essa é a melhor maneira de alcançar meus objetivos? Se sim, por onde começo? Eu não tenho certeza do que fazer - Gmaps4Rails torna isso muito fácil, mas eu não sei o que fazer além do básico.

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>

Respostas:

1 para resposta № 1

Você pode fazê-lo desta maneira Adicionar hash "picture" para @hash assim.

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. No controlador você pode conferir as categorias da cozinha servida.

  2. Adicione o caminho da imagem que possui cores apropriadas.

  3. Adicione-o ao mapa do jeito que você está fazendo.

Outra opção pode ser alterar um pouco a latitude e a longitude com as mesmas informações. mas isso não parece uma boa solução.