examples/docs/source/GMapPanel.html

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