examples/bootstrap/LocationPicker.js

[roojs1] / examples / bootstrap / LocationPicker.js

diff --git a/examples/bootstrap/LocationPicker.js b/examples/bootstrap/LocationPicker.js
index 699897a..e3a9869 100644 (file)
--- a/examples/bootstrap/LocationPicker.js
+++ b/examples/bootstrap/LocationPicker.js
@@ -30,18 +30,75 @@ Roo.example.locationpicker = new Roo.XComponent({
                 {
                     xtype : 'Container',
                     xns : Roo.bootstrap,
-                    cls : 'col-md-12',
+                    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,
+                            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){
@@ -59,14 +116,11 @@ Roo.example.locationpicker = new Roo.XComponent({
                 {
                     xtype : 'Container',
                     xns : Roo.bootstrap,
-                    cls : 'col-md-12',
-                    style : 'margin:auto;',
                     items : [
                         {
                             xtype : 'Column',
                             xns: Roo.bootstrap,
-                            md : 3,
-                            cls : 'col-md-offset-3',
+                            md : 6,
                             items : [
                                 {
                                     xtype : 'Input',
@@ -84,7 +138,7 @@ Roo.example.locationpicker = new Roo.XComponent({
                         {
                             xtype : 'Column',
                             xns: Roo.bootstrap,
-                            md : 3,
+                            md : 6,
                             items : [
                                 {
                                     xtype : 'Input',