docs/source/GMapPanel.html

   1 <html>
   2 <head>
   3   <title>The source code</title>
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   6 </head>
   7 <body  onload="prettyPrint();">
   8     <pre class="prettyprint lang-js"><div id="cls-Ext.ux.GMapPanel"></div>/**\r
   9  * @class Ext.ux.GMapPanel\r
  10  * @extends Ext.Panel\r
  11  * @author Shea Frederick\r
  12  */\r
  13 Ext.ux.GMapPanel = Ext.extend(Ext.Panel, {\r
  14     initComponent : function(){\r
  15         \r
  16         var defConfig = {\r
  17             plain: true,\r
  18             zoomLevel: 3,\r
  19             yaw: 180,\r
  20             pitch: 0,\r
  21             zoom: 0,\r
  22             gmapType: 'map',\r
  23             border: false\r
  24         };\r
  25         \r
  26         Ext.applyIf(this,defConfig);\r
  27         \r
  28         Ext.ux.GMapPanel.superclass.initComponent.call(this);        \r
  29 \r
  30     },\r
  31     afterRender : function(){\r
  32         \r
  33         var wh = this.ownerCt.getSize();\r
  34         Ext.applyIf(this, wh);\r
  35         \r
  36         Ext.ux.GMapPanel.superclass.afterRender.call(this);    \r
  37         \r
  38         if (this.gmapType === 'map'){\r
  39             this.gmap = new GMap2(this.body.dom);\r
  40         }\r
  41         \r
  42         if (this.gmapType === 'panorama'){\r
  43             this.gmap = new GStreetviewPanorama(this.body.dom);\r
  44         }\r
  45         \r
  46         if (typeof this.addControl == 'object' && this.gmapType === 'map') {\r
  47             this.gmap.addControl(this.addControl);\r
  48         }\r
  49         \r
  50         if (typeof this.setCenter === 'object') {\r
  51             if (typeof this.setCenter.geoCodeAddr === 'string'){\r
  52                 this.geoCodeLookup(this.setCenter.geoCodeAddr);\r
  53             }else{\r
  54                 if (this.gmapType === 'map'){\r
  55                     var point = new GLatLng(this.setCenter.lat,this.setCenter.lng);\r
  56                     this.gmap.setCenter(point, this.zoomLevel);    \r
  57                 }\r
  58                 if (typeof this.setCenter.marker === 'object' && typeof point === 'object'){\r
  59                     this.addMarker(point,this.setCenter.marker,this.setCenter.marker.clear);\r
  60                 }\r
  61             }\r
  62             if (this.gmapType === 'panorama'){\r
  63                 this.gmap.setLocationAndPOV(new GLatLng(this.setCenter.lat,this.setCenter.lng), {yaw: this.yaw, pitch: this.pitch, zoom: this.zoom});\r
  64             }\r
  65         }\r
  66 \r
  67         GEvent.bind(this.gmap, 'load', this, function(){\r
  68             this.onMapReady();\r
  69         });\r
  70 \r
  71     },\r
  72     onMapReady : function(){\r
  73         this.addMarkers(this.markers);\r
  74         this.addMapControls();\r
  75         this.addOptions();  \r
  76     },\r
  77     onResize : function(w, h){\r
  78 \r
  79         if (typeof this.getMap() == 'object') {\r
  80             this.gmap.checkResize();\r
  81         }\r
  82         \r
  83         Ext.ux.GMapPanel.superclass.onResize.call(this, w, h);\r
  84 \r
  85     },\r
  86     setSize : function(width, height, animate){\r
  87         \r
  88         if (typeof this.getMap() == 'object') {\r
  89             this.gmap.checkResize();\r
  90         }\r
  91         \r
  92         Ext.ux.GMapPanel.superclass.setSize.call(this, width, height, animate);\r
  93         \r
  94     },\r
  95     getMap : function(){\r
  96         \r
  97         return this.gmap;\r
  98         \r
  99     },\r
 100     getCenter : function(){\r
 101         \r
 102         return this.getMap().getCenter();\r
 103         \r
 104     },\r
 105     getCenterLatLng : function(){\r
 106         \r
 107         var ll = this.getCenter();\r
 108         return {lat: ll.lat(), lng: ll.lng()};\r
 109         \r
 110     },\r
 111     addMarkers : function(markers) {\r
 112         \r
 113         if (Ext.isArray(markers)){\r
 114             for (var i = 0; i < markers.length; i++) {\r
 115                 var mkr_point = new GLatLng(markers[i].lat,markers[i].lng);\r
 116                 this.addMarker(mkr_point,markers[i].marker,false,markers[i].setCenter, markers[i].listeners);\r
 117             }\r
 118         }\r
 119         \r
 120     },\r
 121     addMarker : function(point, marker, clear, center, listeners){\r
 122         \r
 123         Ext.applyIf(marker,G_DEFAULT_ICON);\r
 124 \r
 125         if (clear === true){\r
 126             this.getMap().clearOverlays();\r
 127         }\r
 128         if (center === true) {\r
 129             this.getMap().setCenter(point, this.zoomLevel);\r
 130         }\r
 131 \r
 132         var mark = new GMarker(point,marker);\r
 133         if (typeof listeners === 'object'){\r
 134             for (evt in listeners) {\r
 135                 GEvent.bind(mark, evt, this, listeners[evt]);\r
 136             }\r
 137         }\r
 138         this.getMap().addOverlay(mark);\r
 139 \r
 140     },\r
 141     addMapControls : function(){\r
 142         \r
 143         if (this.gmapType === 'map') {\r
 144             if (Ext.isArray(this.mapControls)) {\r
 145                 for(i=0;i<this.mapControls.length;i++){\r
 146                     this.addMapControl(this.mapControls[i]);\r
 147                 }\r
 148             }else if(typeof this.mapControls === 'string'){\r
 149                 this.addMapControl(this.mapControls);\r
 150             }else if(typeof this.mapControls === 'object'){\r
 151                 this.getMap().addControl(this.mapControls);\r
 152             }\r
 153         }\r
 154         \r
 155     },\r
 156     addMapControl : function(mc){\r
 157         \r
 158         var mcf = window[mc];\r
 159         if (typeof mcf === 'function') {\r
 160             this.getMap().addControl(new mcf());\r
 161         }    \r
 162         \r
 163     },\r
 164     addOptions : function(){\r
 165         \r
 166         if (Ext.isArray(this.mapConfOpts)) {\r
 167             var mc;\r
 168             for(i=0;i<this.mapConfOpts.length;i++){\r
 169                 this.addOption(this.mapConfOpts[i]);\r
 170             }\r
 171         }else if(typeof this.mapConfOpts === 'string'){\r
 172             this.addOption(this.mapConfOpts);\r
 173         }        \r
 174         \r
 175     },\r
 176     addOption : function(mc){\r
 177         \r
 178         var mcf = this.getMap()[mc];\r
 179         if (typeof mcf === 'function') {\r
 180             this.getMap()[mc]();\r
 181         }    \r
 182         \r
 183     },\r
 184     geoCodeLookup : function(addr) {\r
 185         \r
 186         this.geocoder = new GClientGeocoder();\r
 187         this.geocoder.getLocations(addr, this.addAddressToMap.createDelegate(this));\r
 188         \r
 189     },\r
 190     addAddressToMap : function(response) {\r
 191         \r
 192         if (!response || response.Status.code != 200) {\r
 193             Ext.MessageBox.alert('Error', 'Code '+response.Status.code+' Error Returned');\r
 194         }else{\r
 195             place = response.Placemark[0];\r
 196             addressinfo = place.AddressDetails;\r
 197             accuracy = addressinfo.Accuracy;\r
 198             if (accuracy === 0) {\r
 199                 Ext.MessageBox.alert('Unable to Locate Address', 'Unable to Locate the Address you provided');\r
 200             }else{\r
 201                 if (accuracy < 7) {\r
 202                     Ext.MessageBox.alert('Address Accuracy', 'The address provided has a low accuracy.<br><br>Level '+accuracy+' Accuracy (8 = Exact Match, 1 = Vague Match)');\r
 203                 }else{\r
 204                     point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);\r
 205                     if (typeof this.setCenter.marker === 'object' && typeof point === 'object'){\r
 206                         this.addMarker(point,this.setCenter.marker,this.setCenter.marker.clear,true, this.setCenter.listeners);\r
 207                     }\r
 208                 }\r
 209             }\r
 210         }\r
 211         \r
 212     }\r
 213  \r
 214 });\r
 215 \r
 216 Ext.reg('gmappanel', Ext.ux.GMapPanel); </pre>
 217 </body>
 218 </html>