examples/bootstrap/LocationPicker.js

[roojs1] / examples / bootstrap / LocationPicker.js

diff --git a/examples/bootstrap/LocationPicker.js b/examples/bootstrap/LocationPicker.js
index 4402714..e3a9869 100644 (file)
--- a/examples/bootstrap/LocationPicker.js
+++ b/examples/bootstrap/LocationPicker.js
@@ -30,22 +30,130 @@ Roo.example.locationpicker = new Roo.XComponent({
                 {
                     xtype : 'Container',
                     xns : Roo.bootstrap,
-                    cls : 'col-md-12 text-center',
+                    items : [
+                        {
+                            xtype : 'Column',
+                            xns: Roo.bootstrap,
+                            md : 6,
+                            cls : 'col-md-offset-3',
+                            style : 'margin-top: 50px',
+                            items : [
+                                {
+                                    xtype : 'Header',
+                                    xns: Roo.bootstrap,
+                                    level : 1,
+                                    html : "This requires an API now"
+                                }
+                            ]
+                        }
+                    ]
+                },
+               {
+                    xtype : 'Container',
+                    xns : Roo.bootstrap,
+                    items : [
+                        {
+                            xtype : 'Column',
+                            xns: Roo.bootstrap,
+                            md : 6,
+                            cls : 'col-md-offset-3',
+                            style : 'margin-top: 50px',
+                            items : [
+                                {
+                                    xtype : 'Input',
+                                    xns: Roo.bootstrap,
+                                    fieldLabel : 'Location',
+                                    listeners : {
+                                        render : function (_self) {
+                                            _this.location = _self;
+                                        }
+                                    }
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    xtype : 'Container',
+                    xns : Roo.bootstrap,
                     items : [
                         {
                             xtype : 'LocationPicker',
                             xns: Roo.bootstrap,
-                            style : 'width:500px; height: 400px; border: 1px solid #000; margin: 50px auto;',
-                            latitude : 46.15242437752303,
-                            longitude : 2.7470703125,
-                            radius : 300,
+                            style : 'width:500px; height: 400px; border: 1px solid #000;margin:50px auto;',
+                            latitude : 22.276022,
+                            longitude : 114.1751471,
+                            markerTitle : 'Drag Me',
                             listeners : {
                                 render : function (_self) {
                                     _this.picker = _self;
+                                    
+                                    this.gMapContext.autocomplete = new google.maps.places.Autocomplete(_this.location.inputEl().dom);
+                                    
+                                    google.maps.event.addListener(this.gMapContext.autocomplete, "place_changed", function() {
+                                        var place = _this.picker.gMapContext.autocomplete.getPlace();
+                                        if (!place.geometry) {
+                                            Roo.log('location not found');
+                                            return;
+                                        }
+                                        _this.picker.setPosition(place.geometry.location);
+                                    });
+                                    
+                                },
+                                positionchanged : function (_self, location) {
+                                    if(_this.latitude){
+                                        _this.latitude.setValue(location.lat());
+                                    }
+                                    
+                                    if(_this.longitude){
+                                        _this.longitude.setValue(location.lng());
+                                    }
                                 }
                             }
                         }
                     ]
+                },
+                {
+                    xtype : 'Container',
+                    xns : Roo.bootstrap,
+                    items : [
+                        {
+                            xtype : 'Column',
+                            xns: Roo.bootstrap,
+                            md : 6,
+                            items : [
+                                {
+                                    xtype : 'Input',
+                                    xns: Roo.bootstrap,
+                                    fieldLabel : 'Latitude',
+                                    labelAlign : 'top',
+                                    listeners : {
+                                        render : function (_self) {
+                                            _this.latitude = _self;
+                                        }
+                                    }
+                                }
+                            ]
+                        },
+                        {
+                            xtype : 'Column',
+                            xns: Roo.bootstrap,
+                            md : 6,
+                            items : [
+                                {
+                                    xtype : 'Input',
+                                    xns: Roo.bootstrap,
+                                    fieldLabel : 'Longitude',
+                                    labelAlign : 'top',
+                                    listeners : {
+                                        render : function (_self) {
+                                            _this.longitude = _self;
+                                        }
+                                    }
+                                }
+                            ]
+                        }
+                    ]
                 }
             ]
        }