RoR gem Gmaps4rails, customize infowindow

Viewed 171

I have a website in RoR.

I use the gmaps4rails gem to call the Google Maps.

I want to remove the background div of the infowindow, but I don't know how can I do it.

enter image description here

@EDIT1

I have this code in my index.html.erb

<body>

<%# Mapa para mostrar todos os pontos guardados na base de dados %>
  <div id="map_show" class="" style=""></div>

  <script type="text/javascript">

  var InfoBoxBuilder, handler,
      extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
      hasProp = {}.hasOwnProperty;

    InfoBoxBuilder = (function(superClass) {
      extend(InfoBoxBuilder, superClass);

      function InfoBoxBuilder() {
        return InfoBoxBuilder.__super__.constructor.apply(this, arguments);
      }

      InfoBoxBuilder.prototype.create_infowindow = function() {
        var boxText;
        if (!_.isString(this.args.infowindow)) {
          return null;
        }
        boxText = document.createElement("div");
        boxText.setAttribute('class', 'yourClass'); // This is where you add a class style it in your css and see what happens 
        boxText.innerHTML = this.args.infowindow;
        return this.infowindow = new InfoBox(this.infobox(boxText));
      };

      InfoBoxBuilder.prototype.infobox = function(boxText) {
        return {
          content: boxText,
          pixelOffset: new google.maps.Size(-140, 0),
          boxStyle: {
            width: "280px"
          }
        };
      };

      return InfoBoxBuilder;

    })(Gmaps.Google.Builders.Marker);

        handler = Gmaps.build('Google');
        handler.buildMap({ provider: {}, internal: {id: 'map_show'}}, function() {
          markers = handler.addMarkers(<%=raw @hash.to_json %>);
          handler.bounds.extendWith(markers);
          handler.fitMapToBounds();


        });
    </script>
</body>

But the output is this:

enter image description here

What am I doing wrong?

@EDIT2

in my partial _infowindow.html.erb I have this code to give me the information of the monuments, and that information goes to the markers.

    <div class="card" style="">
  <%= image_tag poi.image, :class => "card-img-top cover" %>
  <div class="card-block">
    <h4 class="card-title"><%= poi.name %></h4>
    <p class="card-text"><%= simple_format(poi.description.first(400)) %></p>
  </div>
</div>

Where can I put that? I don't know where to put the code.

@EDIT3

I use this code to render the partial in controller:

marker.infowindow render_to_string(:partial => "/home/infowindow", :locals => { :poi => poi})

but the infowindows stays like the first image

1 Answers
Related