GMapPanel.js 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
  1. /**
  2. * @class Ext.ux.GMapPanel
  3. * @extends Ext.Panel
  4. * @author Shea Frederick
  5. */
  6. Ext.define('Ext.ux.GMapPanel', {
  7. extend: 'Ext.Panel',
  8. alias: 'widget.gmappanel',
  9. requires: ['Ext.window.MessageBox'],
  10. initComponent : function(){
  11. var defConfig = {
  12. plain: true,
  13. zoomLevel: 3,
  14. yaw: 180,
  15. pitch: 0,
  16. zoom: 0,
  17. gmapType: 'map',
  18. border: false
  19. };
  20. Ext.applyIf(this,defConfig);
  21. this.callParent();
  22. },
  23. afterRender : function(){
  24. var wh = this.ownerCt.getSize(),
  25. point;
  26. Ext.applyIf(this, wh);
  27. this.callParent();
  28. if (this.gmapType === 'map'){
  29. this.gmap = new GMap2(this.body.dom);
  30. }
  31. if (this.gmapType === 'panorama'){
  32. this.gmap = new GStreetviewPanorama(this.body.dom);
  33. }
  34. if (typeof this.addControl == 'object' && this.gmapType === 'map') {
  35. this.gmap.addControl(this.addControl);
  36. }
  37. if (typeof this.setCenter === 'object') {
  38. if (typeof this.setCenter.geoCodeAddr === 'string'){
  39. this.geoCodeLookup(this.setCenter.geoCodeAddr);
  40. }else{
  41. if (this.gmapType === 'map'){
  42. point = new GLatLng(this.setCenter.lat,this.setCenter.lng);
  43. this.gmap.setCenter(point, this.zoomLevel);
  44. }
  45. if (typeof this.setCenter.marker === 'object' && typeof point === 'object'){
  46. this.addMarker(point,this.setCenter.marker,this.setCenter.marker.clear);
  47. }
  48. }
  49. if (this.gmapType === 'panorama'){
  50. this.gmap.setLocationAndPOV(new GLatLng(this.setCenter.lat,this.setCenter.lng), {yaw: this.yaw, pitch: this.pitch, zoom: this.zoom});
  51. }
  52. }
  53. GEvent.bind(this.gmap, 'load', this, function(){
  54. this.onMapReady();
  55. });
  56. },
  57. onMapReady : function(){
  58. this.addMarkers(this.markers);
  59. this.addMapControls();
  60. this.addOptions();
  61. },
  62. afterComponentLayout : function(w, h){
  63. if (typeof this.getMap() == 'object') {
  64. this.gmap.checkResize();
  65. }
  66. this.callParent(arguments);
  67. },
  68. setSize : function(width, height, animate){
  69. if (typeof this.getMap() == 'object') {
  70. this.gmap.checkResize();
  71. }
  72. this.callParent(arguments);
  73. },
  74. getMap : function(){
  75. return this.gmap;
  76. },
  77. getCenter : function(){
  78. return this.getMap().getCenter();
  79. },
  80. getCenterLatLng : function(){
  81. var ll = this.getCenter();
  82. return {lat: ll.lat(), lng: ll.lng()};
  83. },
  84. addMarkers : function(markers) {
  85. if (Ext.isArray(markers)){
  86. for (var i = 0; i < markers.length; i++) {
  87. var mkr_point = new GLatLng(markers[i].lat,markers[i].lng);
  88. this.addMarker(mkr_point,markers[i].marker,false,markers[i].setCenter, markers[i].listeners);
  89. }
  90. }
  91. },
  92. addMarker : function(point, marker, clear, center, listeners){
  93. var evt;
  94. Ext.applyIf(marker,G_DEFAULT_ICON);
  95. if (clear === true){
  96. this.getMap().clearOverlays();
  97. }
  98. if (center === true) {
  99. this.getMap().setCenter(point, this.zoomLevel);
  100. }
  101. var mark = new GMarker(point,marker);
  102. if (typeof listeners === 'object'){
  103. for (evt in listeners) {
  104. if (!listeners.hasOwnProperty(evt)) {
  105. continue;
  106. }
  107. GEvent.bind(mark, evt, this, listeners[evt]);
  108. }
  109. }
  110. this.getMap().addOverlay(mark);
  111. },
  112. addMapControls : function(){
  113. if (this.gmapType === 'map') {
  114. if (Ext.isArray(this.mapControls)) {
  115. for(var i=0;i<this.mapControls.length;i++){
  116. this.addMapControl(this.mapControls[i]);
  117. }
  118. }else if(typeof this.mapControls === 'string'){
  119. this.addMapControl(this.mapControls);
  120. }else if(typeof this.mapControls === 'object'){
  121. this.getMap().addControl(this.mapControls);
  122. }
  123. }
  124. },
  125. addMapControl : function(mc){
  126. var mcf = window[mc];
  127. if (typeof mcf === 'function') {
  128. this.getMap().addControl(new mcf());
  129. }
  130. },
  131. addOptions : function(){
  132. if (Ext.isArray(this.mapConfOpts)) {
  133. for(var i=0;i<this.mapConfOpts.length;i++){
  134. this.addOption(this.mapConfOpts[i]);
  135. }
  136. }else if(typeof this.mapConfOpts === 'string'){
  137. this.addOption(this.mapConfOpts);
  138. }
  139. },
  140. addOption : function(mc){
  141. var mcf = this.getMap()[mc];
  142. if (typeof mcf === 'function') {
  143. this.getMap()[mc]();
  144. }
  145. },
  146. geoCodeLookup : function(addr) {
  147. this.geocoder = new GClientGeocoder();
  148. this.geocoder.getLocations(addr, Ext.Function.bind(this.addAddressToMap, this));
  149. },
  150. addAddressToMap : function(response) {
  151. var place, addressinfo, accuracy, point;
  152. if (!response || response.Status.code != 200) {
  153. Ext.MessageBox.alert('Error', 'Code '+response.Status.code+' Error Returned');
  154. }else{
  155. place = response.Placemark[0];
  156. addressinfo = place.AddressDetails;
  157. accuracy = addressinfo.Accuracy;
  158. if (accuracy === 0) {
  159. Ext.MessageBox.alert('Unable to Locate Address', 'Unable to Locate the Address you provided');
  160. }else{
  161. if (accuracy < 7) {
  162. Ext.MessageBox.alert('Address Accuracy', 'The address provided has a low accuracy.<br><br>Level '+accuracy+' Accuracy (8 = Exact Match, 1 = Vague Match)');
  163. }else{
  164. point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
  165. if (typeof this.setCenter.marker === 'object' && typeof point === 'object'){
  166. this.addMarker(point,this.setCenter.marker,this.setCenter.marker.clear,true, this.setCenter.listeners);
  167. }
  168. }
  169. }
  170. }
  171. }
  172. });