git.roojs.org Git - roojs1/blob - examples/bootstrap/LocationPicker.js

   1
   2
   3 Roo.example = Roo.example || {};
   4
   5 Roo.example.locationpicker = new Roo.XComponent({
   6     part     :  ["layout","viewpanel"],
   7     order    : '001-viewpanel',
   8     region   : '',
   9     parent   : false,
  10     name     : "unnamed module",
  11     disabled : false,
  12     permname : '',
  13     _tree : function()
  14     {
  15
  16         this.parent = {
  17             el : new Roo.bootstrap.Body()
  18         }
  19         this.parent.el.layout = false;
  20         this.parent.el.render(document.body);
  21
  22         var _this = this;
  23         var MODULE = this;
  24
  25         return {
  26             xtype: 'Body',
  27             xns: Roo.bootstrap,
  28             items :
  29             [
  30                 {
  31                     xtype : 'Container',
  32                     xns : Roo.bootstrap,
  33                     items : [
  34                         {
  35                             xtype : 'Column',
  36                             xns: Roo.bootstrap,
  37                             md : 6,
  38                             cls : 'col-md-offset-3',
  39                             style : 'margin-top: 50px',
  40                             items : [
  41                                 {
  42                                     xtype : 'Header',
  43                                     xns: Roo.bootstrap,
  44                                     level : 1,
  45                                     html : "This requires an API now"
  46                                 }
  47                             ]
  48                         }
  49                     ]
  50                 },
  51                 {
  52                     xtype : 'Container',
  53                     xns : Roo.bootstrap,
  54                     items : [
  55                         {
  56                             xtype : 'Column',
  57                             xns: Roo.bootstrap,
  58                             md : 6,
  59                             cls : 'col-md-offset-3',
  60                             style : 'margin-top: 50px',
  61                             items : [
  62                                 {
  63                                     xtype : 'Input',
  64                                     xns: Roo.bootstrap,
  65                                     fieldLabel : 'Location',
  66                                     listeners : {
  67                                         render : function (_self) {
  68                                             _this.location = _self;
  69                                         }
  70                                     }
  71                                 }
  72                             ]
  73                         }
  74                     ]
  75                 },
  76                 {
  77                     xtype : 'Container',
  78                     xns : Roo.bootstrap,
  79                     items : [
  80                         {
  81                             xtype : 'LocationPicker',
  82                             xns: Roo.bootstrap,
  83                             style : 'width:500px; height: 400px; border: 1px solid #000;margin:50px auto;',
  84                             latitude : 22.276022,
  85                             longitude : 114.1751471,
  86                             markerTitle : 'Drag Me',
  87                             listeners : {
  88                                 render : function (_self) {
  89                                     _this.picker = _self;
  90
  91                                     this.gMapContext.autocomplete = new google.maps.places.Autocomplete(_this.location.inputEl().dom);
  92
  93                                     google.maps.event.addListener(this.gMapContext.autocomplete, "place_changed", function() {
  94                                         var place = _this.picker.gMapContext.autocomplete.getPlace();
  95                                         if (!place.geometry) {
  96                                             Roo.log('location not found');
  97                                             return;
  98                                         }
  99                                         _this.picker.setPosition(place.geometry.location);
 100                                     });
 101
 102                                 },
 103                                 positionchanged : function (_self, location) {
 104                                     if(_this.latitude){
 105                                         _this.latitude.setValue(location.lat());
 106                                     }
 107
 108                                     if(_this.longitude){
 109                                         _this.longitude.setValue(location.lng());
 110                                     }
 111                                 }
 112                             }
 113                         }
 114                     ]
 115                 },
 116                 {
 117                     xtype : 'Container',
 118                     xns : Roo.bootstrap,
 119                     items : [
 120                         {
 121                             xtype : 'Column',
 122                             xns: Roo.bootstrap,
 123                             md : 6,
 124                             items : [
 125                                 {
 126                                     xtype : 'Input',
 127                                     xns: Roo.bootstrap,
 128                                     fieldLabel : 'Latitude',
 129                                     labelAlign : 'top',
 130                                     listeners : {
 131                                         render : function (_self) {
 132                                             _this.latitude = _self;
 133                                         }
 134                                     }
 135                                 }
 136                             ]
 137                         },
 138                         {
 139                             xtype : 'Column',
 140                             xns: Roo.bootstrap,
 141                             md : 6,
 142                             items : [
 143                                 {
 144                                     xtype : 'Input',
 145                                     xns: Roo.bootstrap,
 146                                     fieldLabel : 'Longitude',
 147                                     labelAlign : 'top',
 148                                     listeners : {
 149                                         render : function (_self) {
 150                                             _this.longitude = _self;
 151                                         }
 152                                     }
 153                                 }
 154                             ]
 155                         }
 156                     ]
 157                 }
 158             ]
 159         }
 160     }
 161 });