Google Map - Uncaught TypeError: Cannot Set Property 'position' Of Undefined

I'm using backbone.js as my framework. My problem is, I got this weird problem when I try integrating google map with backbone.js. Uncaught TypeError: Cannot set property 'positio

Solution 1:

You have to change line

var map = new google.maps.Map($('#map-canvas'), mapOptions);

to

var map = new google.maps.Map($('#map-canvas')[0], mapOptions);

Map() constructor expect Node object. See also jQuery get DOM node? and How to get a DOM Element from a JQuery Selector

Update: If id of map container div element is maplist-page than use:

var map = new google.maps.Map($('#maplist-page')[0], mapOptions);

See also example at jsbin without backbone.js.

Solution 2:

The problem is I'm guessing that the div is not rendered yet when the map is initialized. So, this.$el.html(mapListViewTemplate); should be the first line inside the render method.

And then initialise Google Maps with a dom element, not a jQuery object as Anto Jurkovic stated: var map = new google.maps.Map($('#map-canvas')[0], mapOptions);