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   : '#bootstrap',
  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 : 'Input',
  43                                     xns: Roo.bootstrap,
  44                                     fieldLabel : 'Location',
  45                                     listeners : {
  46                                         render : function (_self) {
  47                                             _this.location = _self;
  48                                         }
  49                                     }
  50                                 }
  51                             ]
  52                         }
  53                     ]
  54                 },
  55                 {
  56                     xtype : 'Container',
  57                     xns : Roo.bootstrap,
  58                     items : [
  59                         {
  60                             xtype : 'LocationPicker',
  61                             xns: Roo.bootstrap,
  62                             style : 'width:500px; height: 400px; border: 1px solid #000;margin:50px auto;',
  63                             latitude : 46.15242437752303,
  64                             longitude : 2.7470703125,
  65                             listeners : {
  66                                 render : function (_self) {
  67                                     _this.picker = _self;
  68
  69                                     this.gMapContext.autocomplete = new google.maps.places.Autocomplete(_this.location.inputEl().dom);
  70
  71                                     google.maps.event.addListener(this.gMapContext.autocomplete, "place_changed", function() {
  72                                         var place = _this.picker.gMapContext.autocomplete.getPlace();
  73                                         if (!place.geometry) {
  74                                             Roo.log('location not found');
  75                                             return;
  76                                         }
  77                                         GmUtility.setPosition(gmapContext, place.geometry.location, function(context) {
  78                                             updateInputValues(inputBinding, context);
  79                                             context.settings.onchanged.apply(gmapContext.domContainer, [ GmUtility.locationFromLatLng(context.location), context.radius, false ]);
  80                                         });
  81                                     });
  82                                 },
  83                                 positionchanged : function (_self, location) {
  84                                     if(_this.latitude){
  85                                         _this.latitude.setValue(location.lat());
  86                                     }
  87
  88                                     if(_this.longitude){
  89                                         _this.longitude.setValue(location.lng());
  90                                     }
  91                                 }
  92                             }
  93                         }
  94                     ]
  95                 },
  96                 {
  97                     xtype : 'Container',
  98                     xns : Roo.bootstrap,
  99                     items : [
 100                         {
 101                             xtype : 'Column',
 102                             xns: Roo.bootstrap,
 103                             md : 6,
 104                             items : [
 105                                 {
 106                                     xtype : 'Input',
 107                                     xns: Roo.bootstrap,
 108                                     fieldLabel : 'Latitude',
 109                                     labelAlign : 'top',
 110                                     listeners : {
 111                                         render : function (_self) {
 112                                             _this.latitude = _self;
 113                                         }
 114                                     }
 115                                 }
 116                             ]
 117                         },
 118                         {
 119                             xtype : 'Column',
 120                             xns: Roo.bootstrap,
 121                             md : 6,
 122                             items : [
 123                                 {
 124                                     xtype : 'Input',
 125                                     xns: Roo.bootstrap,
 126                                     fieldLabel : 'Longitude',
 127                                     labelAlign : 'top',
 128                                     listeners : {
 129                                         render : function (_self) {
 130                                             _this.longitude = _self;
 131                                         }
 132                                     }
 133                                 }
 134                             ]
 135                         }
 136                     ]
 137                 }
 138             ]
 139         }
 140     }
 141 });