Question

I am playing around with backbone and gmaps.js and for some reason the map is not rendering correctly…

The controllers are not showing up right, and the infowindow is rendering oddly too.

I am using the gmaps.js library. I don’t even know how to debug this thing…

Here is my backbone view for the map:

App.MapView = Backbone.View.extend({
   el: '.map',
   initialize: function() {
       this.map = new GMaps({
           div: this.el,
           lat: -12.043333,
           lng: -77.028333,   
       });
       App.houseCollection.bind('reset', this.populateMarkers, this);
   },
   populateMarkers: function(collection) {
       _.each(collection.models, function(house) {
            var html = 'hello'
            this.map.addMarker({
                lat: house.attributes.lat,
                lng: house.attributes.lng,
                infoWindow: {
                    content: html,
                }                
            });
       }, this);
   },
});

Thanks

Answer 1

I’ve seen questions with similar screenshots and the fix is in adding these lines to CSS:

#map label { width: auto; display:inline; }
#map img { max-width: none; max-height: none; }

(if needed, replace #map with your map’s div id or class name) Not related to backbone or gmaps.js, I don’t think, probably some other component of your page.