Question

Hi guys i am trying to create a Google map view with backbone.js but i dont really understand what i need to do in order to achieve it.

This is what i have so far (and i am not sure if that is correct as well). and i really dont understand what needs to happen in the render function for this kind of view.

  MYAPP.Widgets.Map = Backbone.View.extend({
    template : template('grid-12'),
    initialize: function(){
    },
    activate: function(){
        var mapOptions = {
                  zoom: 8,
                  center: new google.maps.LatLng(-34.397, 150.644),
                  mapTypeId: google.maps.MapTypeId.ROADMAP
                };
    this.map = new google.maps.Map(document.getElementById('googleMapBox'),mapOptions);
    },
    render: function(){
        this.$el.html(this.template(this));
        this.activate();
        return this;
    },
});

Thanks

EDITED:
I have looked in the threads that tkone has mentioned.
i don’t see the answer there and i don’t really understand why he is refusing to give any real help in the matter. It might be from my lack of knowledge in JS or backbone (which really doesn’t matter). the same issue with tkone was mentioned in the other posts where another user was not able to understand how to make this work.

i have managed to get this far but i am getting this error

   Uncaught TypeError: Cannot read property 'offsetWidth' of null main.js:28
                                                               ih main.js:28
                                                               Lh main.js:34
MYAPP.Widgets.Map.Backbone.View.extend.activate MTAPP.widgets.js:23
MYAPP.Widgets.Map.Backbone.View.extend.render MYAPP.widgets.js:38

(anonymous function)

i hope theres anyone else who might want to contribute in solving this matter.

UPDATE So following the comments the getElement function did return null, so i switched it up with a jquery selector that returned an element

BUT!, i did get a different error: Uncaught TypeError: Cannot set property ‘position’ of undefined

Following this thread:
Uncaught TypeError: Cannot set property 'position' of undefined

i see that you cannot send a jquery element to the Map object. so now i am stuck with how to extract the actual DOM element from the jquery one.

following this thread:
How to get a DOM Element from a JQuery Selector

i was finally able solve it.

thank you.

Answer 1

The way i got to the solution is thanks to the comments by @dbaseman and other thread i have found, all listed in the actual question. I will just post the complete solution:

   MYAPP.Widgets.Map = Backbone.View.extend({
    template : template('grid-12'),
    initialize: function(){
    },
    activate: function(){
        var mapOptions = {
                  zoom: 8,
                  center: new google.maps.LatLng(-34.397, 150.644),
                  mapTypeId: google.maps.MapTypeId.ROADMAP
                };
        var domElement = this.$('#googleMapBox');
        this.map = new google.maps.Map(domElement.get(0),mapOptions);
    },
    render: function(){
        this.$el.html(this.template(this));
        this.activate();
        return this;
    },
});

where the Template function is just:

  var template = function (name) {
    var source = $('#' + name + '-template').html();
    return Handlebars.compile(source);
};

The template itself is:

<script type="text/x-mustache-template" id="grid-12-template">
<div class="row-fluid sortable ui-sortable">
            <div class="box span12">
                <div class="box-header">
                    <h2><i class="icon-th"></i><span class="break"></span>thegrid</h2>
                    <div class="box-icon">
                        <a href="#" class="btn-setting"><i class="icon-wrench"></i></a>
                        <a href="#" class="btn-minimize"><i class="icon-chevron-up"></i></a>
                        <a href="#" class="btn-close"><i class="icon-remove"></i></a>
                    </div>
                </div>
                <div id="googleMapBox" class="box-content">
              </div>
            </div><!--/span-->
        </div>
</script>

Good luck