gmaps4rails marker not clickable after add custom images

Question

I have this code..works fine.

Controller:

@locations = Location.where(:country_id => @country.id)


    @hash = Gmaps4rails.build_markers(@locations) do |location, marker|
       marker.lat location.latitude
       marker.lng location.longitude
       marker.infowindow location.description
    end

View:

<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();


    });
</script>

Now i want to add custom markers (category) show each location belongs to a category.

@hash = Gmaps4rails.build_markers(@locations) do |location, marker|
       marker.lat location.latitude
       marker.lng location.longitude
       marker.picture({
       "url" => "/assets/" + location.category + ".png",
       "width" =>  "30",        
       "height" => "30"
       })
       marker.infowindow location.description
    end

html

handler = Gmaps.build('Google');
                handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
                  markers = handler.addMarkers([{"lat":43.3851,"lng":12.3856,"picture":{"url":"/assets/apartment.png","width":"25","height":"25"},"title":"Apartment Magazzino of Villa Il Frantoio is located in Umbria at the edge of a small \"borgo\" (a group of houses standing together). The house lies in a peaceful setting, but is centrally located at the same time? it is only a 10 minute drive to the shops and restaurants. \r\n \r\n","infowindow":"Apartment Magazzino of Villa Il Frantoio is located in Umbria at the edge of a small \"borgo\" (a group of houses standing together). The house lies in a peaceful setting, but is centrally located at the same time? it is only a 10 minute drive to the shops and restaurants. \r\n \r\n"},{"lat":43.3851,"lng":12.3856,"picture":{"url":"/assets/apartment.png","width":"25","height":"25"},"title":"Apartment Magazzino of Villa Il Frantoio is located in Umbria at the edge of a small \"borgo\" (a group of houses standing together). The house lies in a peaceful setting, but is centrally located at the same time? it is only a 10 minute drive to the shops and restaurants","infowindow":"Apartment Magazzino of Villa Il Frantoio is located in Umbria at the edge of a small \"borgo\" (a group of houses standing together). The house lies in a peaceful setting, but is centrally located at the same time? it is only a 10 minute drive to the shops and restaurants"});
              handler.bounds.extendWith(markers);
              handler.fitMapToBounds();


            });

this works in case of the markers (different bases on category) but the markers are not clickable anymore. What am i doing wrong?

thanks..remco

Answer 1

Replace:

   "width" =>  "30",        
   "height" => "30"

With:

   "width" =>  30,        
   "height" => 30

They must be numbers