Monitoring.js

 Ext.define('Wp.view.map.MapController', {
     extend: 'Ext.app.ViewController',
     alias: 'controller.map',
     requires: [
         'Ext.container.Container',
         'Ext.layout.container.Border',
         'Ext.ux.GMapPanel',
         'Ext.ux.IFrame',
         'Ext.window.Window'
     ],
     config: {
         listen: {
             // The fireEvent() is coming from a component so we listen on the component event domain
             component: {
                 // The component we are listening to is alias : map
                 'map': {
                     // The fireEvent() from the map component
                     markerClick: function (marker) {
                         /*
                          * This will create and open a window with a zoomed in street map as well
                          * as open the WikiPedia page from the url on the marker
                          * */
                         Ext.create('Ext.window.Window', {
                             title: marker.title, // Marker title
                             height: 600,
                             width: 500,
                             modal: true,
                             layout: 'border',
                             maximizable: true,
                             items: [
                                 {
                                     xtype: 'gmappanel',
                                     region: 'west',
                                     split: true,
                                     width: 300,
                                     center: {
                                         lat: marker.lat, // Marker latitude
                                         lng: marker.lng // Marker longitude
                                     },
                                     mapOptions: {
                                         mapTypeId: google.maps.MapTypeId.SATELLITE,
                                         zoom: 10
                                     },
                                    listeners: {
                                        mapready: 'initMarker'
                                    }
                                 },
                                 {
                                     xtype: 'container',
                                     region: 'center',
                                     layout: 'border',
                                     items: [
                                         {
                                             xtype: 'uxiframe',
                                             src: marker.url // Marker URL
                                         }
                                     ]
                                 }
                             ]
                         }).show()
                     }
                 }
             }
         }
     },
     /*
     * The init method fires before the view is initialized and the markers are loaded from the store
     **/
     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
        //          if (data.status == 'green'){
                    
        //              data.icon = 'http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_green.png';
                    
        //          }
        //          else if(data.status == 'red'){
                    
        //             data.icon = 'http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_red.png';
        //          }
        //          else{
                    
        //             data.icon = 'http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_yellow.png';
        //          }
        //              // Push the objects onto the markers array
                 
        //      });
        //  });
        //  debugger;
        //  map.markers = markers;  // Set the markers config for the Map component to the markers array
        //  debugger;
     },
     initMarker: function () {
        debugger;
        var me = this,
            map = me.getView(), //Reference to map view
            store = map.getViewModel().getStore('Markers'), // Get the store from the ViewModel
            data;

        var map = new google.maps.Map(document.getElementById('gmap'), {
            zoom: 6,
            center: {
                lat: 31,
                lng: 31
            },
            disableDefaultUI: true,
            zoomControl: true,
            });
            
            store.load(function (records) {
                   
                      // Iterate through each record
                      Ext.each(records, function (record) {
                        
                          data = record.getData(); // Get the data object from each record
                          if (data.status == 'green'){
                            var m = 'http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_green.png';
                          }
                          else if(data.status == 'red'){              
                            var m = 'http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_red.png';
                          }
                          else{              
                            var m = 'http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_yellow.png';
                          }

                        var m = new google.maps.Marker({
                            map: map,
                            title: data.title,
                            position: {lat: data.lat, lng: data.lng},
                            icon : m
                        });
                            
                        m.addListener('click', function(e) {
                            markerClick(e);
                        });
                              // Push the objects onto the markers array
                       
                      });
            });
     },
     showHideLocationDetail: function(){
        var form = this.lookupReference('LocationDetails');
        debugger;
        form.expand(false);
     }
     
     /*
     * Method to add a new marker.  This could come from a form and could also use the geocode function
     * */
    //  addNewMarker: function (btn) {
    //      var map = btn.up('map'),
    //          marker = {
    //              lat: 31.633725,
    //              lng: -7.993092,
    //              title: "Marrakesh",
    //              url: 'https://en.wikipedia.org/wiki/Marrakesh',
    //              animation: google.maps.Animation.DROP
    //          };
    //      map.addMarker(marker)
    //  }
 });