Question

I am having trouble adding markers to a google map with backbone.

I created a jsfiddle for easier debugging…

http://jsfiddle.net/jLc53/3/

I think that the problem might have to do with the posts collection being empty when the map is rendered, but I am not sure.

I have an API that returns posts information, and each post has a latitude and longitude.

Answer 1

Your first issue is that your API (appears to be using TastyPie) returns the array of results not as the root of the response, but as a sub-property.

Backbone Collections expect to receive an array of objects:

[{obj1},{obj2},{obj3}]

Your API returns:

{meta:{response metadata},objects:[{obj1},{obj2},{obj3}]}

The way to deal with that in Backbone Collections is to override the parse function so that it returns an array of objects:

parse: function (response) {
    return response.objects;
}

The possible 2nd issue is that when a Collection.fetch() completes, the event it emits is not a change event, but a reset event. So, if you want your view to re-render when the fetch completes, you need to bind to reset not change.