title: Google map - Uncaught TypeError: Cannot set property 'position' of undefined
body: <p>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. </p>
  
  <pre><code>Uncaught TypeError: Cannot set property 'position' of undefined
  </code></pre>
  
  <p>The tutorial is from this site.</p>
  
  <p><a href="https://developers.google.com/maps/documentation/javascript/examples/event-closure" rel="nofollow noreferrer">https://developers.google.com/maps/documentation/javascript/examples/event-closure</a></p>
  
  <p>Even I already try these solutions, the problem still occurring. </p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/8483023/uncaught-typeerror-cannot-set-property-position-of-undefined">Uncaught TypeError: Cannot set property &#39;position&#39; of undefined</a></li>
  <li><a href="https://stackoverflow.com/questions/10499412/google-maps-request-returning-cannot-set-property-position-of-undefined">Google maps request returning &quot;Cannot set property &#39;position&#39; of undefined&quot;</a></li>
  </ul>
  
  <p>My code below</p>
  
  <p>js</p>
  
  <pre><code>define(['jquery', 'underscore', 'backbone', 'text!modules/map/mapListViewTemplate.html'], function($, _, Backbone, mapListViewTemplate) {
      var MapListView = Backbone.View.extend({
          initialize: function() {},
          render: function() {
                  var mapOptions = {
                      zoom: 4,
                      center: new google.maps.LatLng(-25.363882, 131.044922)
                  };
                  var map = new google.maps.Map($('#map-canvas'), mapOptions);
                  // Add 5 markers to the map at random locations
                  var southWest = new google.maps.LatLng(-31.203405, 125.244141);
                  var northEast = new google.maps.LatLng(-25.363882, 131.044922);
                  var bounds = new google.maps.LatLngBounds(southWest, northEast);
                  map.fitBounds(bounds);
                  var lngSpan = northEast.lng() - southWest.lng();
                  var latSpan = northEast.lat() - southWest.lat();
                  for (var i = 0; i &lt; 5; i++) {
                      var position = new google.maps.LatLng(
                      southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random());
                      var marker = new google.maps.Marker({
                          position: position,
                          map: map
                      });
                      marker.setTitle((i + 1).toString());
                      this.attachSecretMessage(marker, i);
                  }
  
              this.$el.html(mapListViewTemplate);
          },
          attachSecretMessage: function(marker,num) {
              var message = ['This', 'is', 'the', 'secret', 'message'];
                  var infowindow = new google.maps.InfoWindow({
                      content: message[num]
                  });
                  google.maps.event.addListener(marker, 'click', function() {
                      infowindow.open(marker.get('map'), marker);
                  });
          },
          remove: function() {
              Backbone.View.prototype.remove.call(this);
              $(window).off('scroll');
          }
      });
      return MapListView;
  });
  </code></pre>
  
  <p>html</p>
  
  <pre><code>&lt;div id="map-canvas"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Thanks.</p>