How to create a backbone.js view for Google maps

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.

possible duplicate of [Mixing Google Maps custom overlays with Backbone Views](http://stackoverflow.com/questions/9102762/mixing-google-maps-custom-overlays-with-backbone-views) — tkone, Feb 04 '13 at 19:47
If that doesn't directly resolve the issue, I have a bunch of code from working exactly on this I can probably show you. — tkone, Feb 04 '13 at 19:48
Re: the render function, anything you want to do on the map (set pins, cluster, etc.) — steveax, Feb 04 '13 at 22:10
@tkone wont it just be better to answer the question with that code sample? — Gleeb, Feb 05 '13 at 07:34
What exactly is in the template (`grid-12`)? Is that where you have the overlay? Seems like the error is related to adding the control and that's not shown in your code. — steveax, Feb 06 '13 at 19:51
I dimly recall that this error comes from the Google Maps script, and means that it can't find the container element. I would start by putting a breakpoint inside `activate`, and checking that `document.getElementById('googleMapBox')` does in fact return a valid element. — McGarnagle, Feb 06 '13 at 20:01
@dbaseman - you are right the getElement did return null, changing it to var this.$('#googleMapBox'); returned an element but now there is a different error: Uncaught TypeError: Cannot set property 'position' of undefined. (all coming from main.js)\ — Gleeb, Feb 06 '13 at 20:18
@Gleeb so does `$("#googleMapBox")` actually return anything (other than an empty array)? If so, then use `$("#googleMapBox")[0]` to get actual Javascript element object. If not, you need then the element hasn't rendered to the page, and you need to figure out why. — McGarnagle, Feb 06 '13 at 20:27
I didn't use $("#googleMapBox")[0] for simplicity and code readability. — Gleeb, Apr 21 '13 at 12:12

Gleeb · Accepted Answer · 2013-02-10T07:40:55.683

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

How to create a backbone.js view for Google maps

1 Answers1