ruby-on-railsmapsinfowindowgmaps4rails

RoR gem Gmaps4rails, customize infowindow

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

Solution

  • I am still learning myself but basically you need to be able to target the infowindow div. When you create an infowindow using gmaps4rails it creates a div within the main div so you are only customizing the inside div. You need a little more code to target the main div. I used to following code to accomplish this:

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

    This will allow you to target the main div altering the whole look of the window. Let me know if this works for you or if you need more guidance post your code too.

    Here is the updated code portion I was telling you about.

            <!-- Custom info markers -->

     <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>

    I updated my answer to fit yours. You need to create a class where it says your class in this section and style it to your liking. 

     boxText = document.createElement("div");
    boxText.setAttribute('class', 'yourClass'); // This is where you add a class style it in your css and see what happens