RoR gem Gmaps4rails, customize infowindow
I have a site in RoR.
I am using the gmaps4rails gem to call Google Maps.
I want to remove the background div from the infowindow, but I don't know how.
@ 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 as follows:
What am I doing wrong?
@ EDIT2
in my partial _infowindow.html.erb I have this code to give me information about monuments and this information goes to 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 this? I don't know where to put the code.
@ EDIT3
I am using this code to render a partial in a controller:
marker.infowindow render_to_string (: partial => "/ home / infowindow" ,: locals => {: poi => poi})
but the info windows remain as the first image
source to share
I'm still involved with myself, but basically you need to target the infowindow div. When you create an infowindow with gmaps4rails it creates a div inside the main div, so you only customize the inner div. You need a little more code to target the main div. I used the following code for 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, changing the entire appearance of the window. Let me know if this works for you, or if you need more instructions, post your code too.
Here is the updated piece of code that 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 have updated my answer to suit your requirements. You need to create a class that says your class in this section and customize 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
source to share