google maps not rendering correctly

backbone.js, google-maps

Solution

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.

Problem

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

Original source