title: Change Style from my Map
body: <p>I'm learning how to use the Ext.js framework and I'm building simple applications using the MVVM model. I built a simple Map and I'm trying to costumize it, I did an application using Google API and the GMapPanel widget, and now I would like to create a new style and add it but I'm having some issues adding my costume style. </p>
  
  <p>I receive the the following errors:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'set' of undefined
        at constructor.init (MapController.js?_dc=20151109082919:198)
        at new constructor (ext-all-rtl-debug.js?_dc=20151109082919:63176)
        at constructor [as self] (ext-all-rtl-debug.js?_dc=20151109082919:12296)
        at Object.widget (ext-all-rtl-debug.js?_dc=20151109082919:14662)
        at constructor.create (ext-all-rtl-debug.js?_dc=20151109082919:26228)
        at constructor.lookupComponent (ext-all-rtl-debug.js?_dc=20151109082919:123938)
        at constructor.prepareItems (ext-all-rtl-debug.js?_dc=20151109082919:124418)
        at constructor.add (ext-all-rtl-debug.js?_dc=20151109082919:123436)
        at constructor.initItems (ext-all-rtl-debug.js?_dc=20151109082919:123861)
        at constructor.initComponent (ext-all-rtl-debug.js?_dc=20151109082919:123821)</p>
  </blockquote>
  
  <p>My code:</p>
  
  <pre><code>init: function () {
  
      var me = this,
          map = me.getView(), //Reference to map view
          store = map.getViewModel().getStore('Markers'), // Get the store from the ViewModel
          markers = [], // Create and empty markers array
          data;
      // Load the store
      store.load(function (records) {
          // Iterate through each record
          Ext.each(records, function (record) {
              data = record.getData(); // Get the data object from each record
              markers.push(data); // Push the objects onto the markers array
          });
      });
      map.markers = markers;  // Set the markers config for the Map component to the markers array
  
      var styledMapType = new google.maps.StyledMapType(
          [
            {elementType: 'geometry', stylers: [{color: '#ebe3cd'}]},
            {elementType: 'labels.text.fill', stylers: [{color: '#523735'}]},
            {elementType: 'labels.text.stroke', stylers: [{color: '#f5f1e6'}]},
            {
              featureType: 'administrative',
              elementType: 'geometry.stroke',
              stylers: [{color: '#c9b2a6'}]
            },
            {
              featureType: 'administrative.land_parcel',
              elementType: 'geometry.stroke',
              stylers: [{color: '#dcd2be'}]
            },
            {
              featureType: 'administrative.land_parcel',
              elementType: 'labels.text.fill',
              stylers: [{color: '#ae9e90'}]
            },
            {
              featureType: 'landscape.natural',
              elementType: 'geometry',
              stylers: [{color: '#dfd2ae'}]
            },
            {
              featureType: 'poi',
              elementType: 'geometry',
              stylers: [{color: '#dfd2ae'}]
            },
            {
              featureType: 'poi',
              elementType: 'labels.text.fill',
              stylers: [{color: '#93817c'}]
            },
            {
              featureType: 'poi.park',
              elementType: 'geometry.fill',
              stylers: [{color: '#a5b076'}]
            },
            {
              featureType: 'poi.park',
              elementType: 'labels.text.fill',
              stylers: [{color: '#447530'}]
            },
            {
              featureType: 'road',
              elementType: 'geometry',
              stylers: [{color: '#f5f1e6'}]
            },
            {
              featureType: 'road.arterial',
              elementType: 'geometry',
              stylers: [{color: '#fdfcf8'}]
            },
            {
              featureType: 'road.highway',
              elementType: 'geometry',
              stylers: [{color: '#f8c967'}]
            },
            {
              featureType: 'road.highway',
              elementType: 'geometry.stroke',
              stylers: [{color: '#e9bc62'}]
            },
            {
              featureType: 'road.highway.controlled_access',
              elementType: 'geometry',
              stylers: [{color: '#e98d58'}]
            },
            {
              featureType: 'road.highway.controlled_access',
              elementType: 'geometry.stroke',
              stylers: [{color: '#db8555'}]
            },
            {
              featureType: 'road.local',
              elementType: 'labels.text.fill',
              stylers: [{color: '#806b63'}]
            },
            {
              featureType: 'transit.line',
              elementType: 'geometry',
              stylers: [{color: '#dfd2ae'}]
            },
            {
              featureType: 'transit.line',
              elementType: 'labels.text.fill',
              stylers: [{color: '#8f7d77'}]
            },
            {
              featureType: 'transit.line',
              elementType: 'labels.text.stroke',
              stylers: [{color: '#ebe3cd'}]
            },
            {
              featureType: 'transit.station',
              elementType: 'geometry',
              stylers: [{color: '#dfd2ae'}]
            },
            {
              featureType: 'water',
              elementType: 'geometry.fill',
              stylers: [{color: '#b9d3c2'}]
            },
            {
              featureType: 'water',
              elementType: 'labels.text.fill',
              stylers: [{color: '#92998d'}]
            }
          ],
          {name: 'Styled Map'});
  
  
      map.mapTypes.set('styled_map', styledMapType);
      map.setMapTypeId('styled_map');
  
  
  
  }
  </code></pre>