title: Uncaught TypeError: Cannot read property 'html' of undefined
body: <p>I am trying to have a google map display on my webpage using backbone.js and handlebars.js, but I can't get it to display.  When I load the page, I get this error in my javascript console:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'html' of undefined</p>
  </blockquote>
  
  <p>Does anyone know what I am doing wrong? Any and all suggestions welcome.</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;   
  &lt;html&gt;                                                                          
      &lt;head&gt;                                                                      
          {% load staticfiles %}                                                  
          &lt;meta charset="utf-8"&gt;                                                  
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;          
          &lt;meta http-equiv="cleartype" content="on"&gt;                  
          &lt;link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.css' %}"&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="{% static 'bootstrap/js/bootstrap.js' %}"&gt;&lt;/script&gt;        
          &lt;script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"&gt;&lt;/script&gt;
          &lt;script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"&gt;&lt;/script&gt;
          &lt;script src="{% static 'django_project/js/handlebars.js' %}"&gt;&lt;/script&gt;  
          &lt;link href="https://fonts.googleapis.com/css?family=Raleway:400,700,200" rel="stylesheet" type="text/css"&gt;
          &lt;script src="https://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;script type="text/x-mustache-template" id="grid-12-template"&gt;          
              &lt;div id="googleMapBox" class="box-content"&gt;&lt;/div&gt;               
          &lt;/script&gt;                                                               
          &lt;script src="{% static 'django_project/js/django_project.js' %}"&gt;&lt;/script&gt;
          &lt;script&gt;                                                                
              var GoogMap = new GoogleMap;                                    
              GoogMap.render();
          &lt;/script&gt;  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>django_project.js</p>
  
  <pre><code>var template = function (name) {                                                
      var source = $('#' + name + '-template').html();                        
      return Handlebars.compile(source);                                      
  };                                                                              
  
  var GoogleMap = 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;
  
      }
  
  });
  </code></pre>