title: On click event google map add marker Extjs
body: <p>Hello I  click event Implemented but nothing hapens.I am using MVC Extjs I know how to implement in javascript for example<a href="http://jsfiddle.net/fatihacet/ckegk/" rel="nofollow noreferrer">jsfiddle</a> simple click event but in extjs where I should put the code I have gmappanel in window how to handle this in controller I have no idea how to do it... Help Where I should put this code:</p>
  
  <pre><code>   var map = Ext.getCmp('gmapForm');
  google.maps.event.addListener(map, 'click', function(e) {
      var lat = e.latLng.lat(); // lat of clicked point
      var lng = e.latLng.lng(); // lng of clicked point
      var markerId = getMarkerUniqueId(lat, lng); // an that will be used to cache this marker in markers object.
      var marker = new google.maps.Marker({
          position: getLatLng(lat, lng),
          map: map,
          id: 'marker_' + markerId
      });
  }); 
  </code></pre>
  
  <p>here is my view with not working listeners no one works I wondered:</p>
  
  <pre><code>    Ext.define('App.view.App', {
          extend: 'Ext.window.Window',
          alias: 'widget.appform',
          title:'',
          operation:'',
         resizable: false,
          modal:true,
          initComponent: function () {
              me = this;
              this.autoShow = true;
              this.width = 550;
              this.height = 650;
              this.items = [
                  {
                      xtype: 'textfield',
                      name: 'title',
                      value:me.login,
                      fieldLabel: 'Title',
                      allowBlank: false,
                      width:330,
                      style:{
                          marginTop:'10px',
                          marginLeft:'20px',
                          marginRight:'20px'
                      }
                  },
  
                  {
                      title: 'Google Map',
                      width:535,
                      height:800,
                   //   frame:true,
                        id:'gmapForm',
                    //  height: '100%',
                      xtype: 'gmappanel',
                      gmapType: 'map',
                      center: {
                          geoCodeAddr: "221B Baker Street",
                          marker: {
                              title: 'Holmes Home'
                          }
                      },
                      mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
                      mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
                      mapOptions : {
                          mapTypeId: google.maps.MapTypeId.ROADMAP
                      },
                      listeners: {
  
                          maprender: function(extMapComponent, googleMapComp){
  
                              var marker = new google.maps.Marker({
                                  position: position = new google.maps.LatLng (42.16726190,-87.83146810),
                                  // position: patientPosition,   //patientPosition initialized in geocodePatientAddress() function in Home.js
                                  map: googleMapComp,
                                  animation: google.maps.Animation.DROP,
                                  draggable: false,
                                  title: 'Patient Location'
  
                              });
  
                              google.maps.event.addListener(marker, 'click', function() {
                                 // infowindow.open(googleMapComp, marker);
                                  console.log('sssssssssss');
                              });
  
                              google.maps.event.addListener(marker, 'mouseout', function() {
                                  infowindow.close(googleMapComp, marker);
                              });
                          }
  
                      },
                      handler : function () {
                          google.maps.event.addListener(marker, 'click', function() {
                              // infowindow.open(googleMapComp, marker);
                              console.log('sssssssssss');
                          });
                         // this.up('window').down('form').getForm().reset();
                      }
  
  
                     /* google.maps.event.addListener(gObject, "click", function(e){
                          alert('test');
                      })*/
  
                  }
  
              ];
              this.buttons = [
                  {
                      text:me.operation,
                      name: me.operation,
                      scope: this
                  },
  
              ];
              console.log(arguments);
              this.callParent(arguments);
          }
      });
  </code></pre>
  
  <p>Here is my controller:</p>
  
  <pre><code>Ext.define('App.controller.AppController', {
      extend: 'Ext.app.Controller',
      views:  [
          'App.AppPanelView',
  
          'App.AppForm'
  
         ],
      stores: ['App.Apptore'],
      models: ['App.AppModel'],
      refs: [
          { ref: 'App', selector: 'AppForm' }
  
  
      ],
  
      init: function () {
          this.control({
  
  
              'App button[name="Add"]':{
                  click:this.addPersonForm,
                  afterrender:this.addMapListener
           }
          });
      },
  
      selectedRow:null,
      countryId:null,
      personProfile:null,
      modalImageIndex:null,
      imageId:null,
      avatar:"",
  
  
  
      addMarker:function(){
  console.log("aaaaaaa");
         var win= Ext.widget('AppForm',{title:'Add Group',operation:'Add'});
          var trafficMap = Ext.getCmp('gmapForm');
        //  var marker_icon = new google.maps.MarkerImage('images/map/' + thisIcon + '.png', new google.maps.Size(32, 32));
          /*var trafficMarker = new google.maps.Marker({
              position: new google.maps.LatLng(alert.lat, alert.lon),
              map: trafficMap,
           //   icon: marker_icon,
              id: 'trafficAlertIcon'  *//*i*//*
          });*/
  
          /*var options = {
              lat:3.951941,
              lng:-102.052002,
              marker: {title:"Hello World!"},
              listeners: {
                  click: function(e){
  
                  }
              }
          };
          console.log(trafficMap);
         var lat = 3.951941,
              lng = 102.052002;
          var mpoint = new google.maps.LatLng(lat,lng);
          trafficMap.addMarker(mpoint,options.marker,false,false, options.listeners);*/
  
         /* google.maps.event.addListener(trafficMarker, 'mousedown', function()
          {
              console.log('touched marker');
             *//* trafficTabPanel.layout.setActiveItem(1, {type: 'slide', direction: 'left'});
              LoadIncidentMap(this.id.substring(16));*//*
          });
  */
         /* google.maps.event.addListener(trafficMap, "click", function (e) {
              console.log('click');
  
              //lat and lng is available in e object
           //   var latLng = e.latLng;
  
          });*/
  
          var addMarker = google.maps.event.addListener(trafficMap, 'click', function(e) {
              var lat = e.latLng.lat(); // lat of clicked point
              var lng = e.latLng.lng(); // lng of clicked point
              var markerId = getMarkerUniqueId(lat, lng); // an that will be used to cache this marker in markers object.
              var marker = new google.maps.Marker({
                  position: getLatLng(lat, lng),
                  map: map,
                  id: 'marker_' + markerId
              });
              console.log(lat+  " "+  lng);
  
              //    markers[markerId] = marker; // cache marker in markers object
          //    bindMarkerEvents(marker); // bind right click event to marker
          });
          addMarker;
          console.log('clickaa');
  
  
  
          //win.show();
      },
      addMapListener:function() {
          console.log("A1");
  
          var trafficMap = Ext.getCmp('gmapForm');
          google.maps.event.addListener(trafficMap, 'click', function(e) {
              console.log("A3");
  
              var lat = e.latLng.lat(); // lat of clicked point
              var lng = e.latLng.lng(); // lng of clicked point
              var markerId = getMarkerUniqueId(lat, lng); // an that will be used to cache this marker in markers object.
              var marker = new google.maps.Marker({
                  position: getLatLng(lat, lng),
                  map: map,
                  id: 'marker_' + markerId
              });
  
              console.log(lat+" "+lng);
  
              //    markers[markerId] = marker; // cache marker in markers object
              //    bindMarkerEvents(marker); // bind right click event to marker
          });
          console.log("A22");
  
          var map;
        //  map = new google.maps.Map($('#map')[0], myOptions);
         /* var myOptions = {
              zoom: 7,
              center: new google.maps.LatLng(46.87916, -3.32910),
              mapTypeId: 'roadmap'
          };
          google.maps.event.addListener(map, 'click', function(e) {
              console.log(A2);
  
              var lat = e.latLng.lat(); // lat of clicked point
              var lng = e.latLng.lng(); // lng of clicked point
              var markerId = getMarkerUniqueId(lat, lng); // an that will be used to cache this marker in markers object.
              var marker = new google.maps.Marker({
                  position: getLatLng(lat, lng),
                  map: map,
                  id: 'marker_' + markerId
              });
              markers[markerId] = marker; // cache marker in markers object
              bindMarkerEvents(marker); // bind right click event to marker
          });*/
  
      }
  });
  </code></pre>
  
  <p>I have tried everything why extjs is <a href="https://stackoverflow.com/questions/15792655/add-marker-to-google-map-on-click">stackoverflow example</a> Where have this codes be putten </p>