3 * Copyright(c) 2006-2010 Ext JS, Inc.
5 * http://www.extjs.com/license
8 * @class Ext.ux.GMapPanel
10 * @author Shea Frederick
12 Ext.ux.GMapPanel = Ext.extend(Ext.Panel, {
13 initComponent : function(){
25 Ext.applyIf(this,defConfig);
27 Ext.ux.GMapPanel.superclass.initComponent.call(this);
30 afterRender : function(){
32 var wh = this.ownerCt.getSize();
33 Ext.applyIf(this, wh);
35 Ext.ux.GMapPanel.superclass.afterRender.call(this);
37 if (this.gmapType === 'map'){
38 this.gmap = new GMap2(this.body.dom);
41 if (this.gmapType === 'panorama'){
42 this.gmap = new GStreetviewPanorama(this.body.dom);
45 if (typeof this.addControl == 'object' && this.gmapType === 'map') {
46 this.gmap.addControl(this.addControl);
49 if (typeof this.setCenter === 'object') {
50 if (typeof this.setCenter.geoCodeAddr === 'string'){
51 this.geoCodeLookup(this.setCenter.geoCodeAddr);
53 if (this.gmapType === 'map'){
54 var point = new GLatLng(this.setCenter.lat,this.setCenter.lng);
55 this.gmap.setCenter(point, this.zoomLevel);
57 if (typeof this.setCenter.marker === 'object' && typeof point === 'object'){
58 this.addMarker(point,this.setCenter.marker,this.setCenter.marker.clear);
61 if (this.gmapType === 'panorama'){
62 this.gmap.setLocationAndPOV(new GLatLng(this.setCenter.lat,this.setCenter.lng), {yaw: this.yaw, pitch: this.pitch, zoom: this.zoom});
66 GEvent.bind(this.gmap, 'load', this, function(){
71 onMapReady : function(){
72 this.addMarkers(this.markers);
73 this.addMapControls();
76 onResize : function(w, h){
78 if (typeof this.getMap() == 'object') {
79 this.gmap.checkResize();
82 Ext.ux.GMapPanel.superclass.onResize.call(this, w, h);
85 setSize : function(width, height, animate){
87 if (typeof this.getMap() == 'object') {
88 this.gmap.checkResize();
91 Ext.ux.GMapPanel.superclass.setSize.call(this, width, height, animate);
99 getCenter : function(){
101 return this.getMap().getCenter();
104 getCenterLatLng : function(){
106 var ll = this.getCenter();
107 return {lat: ll.lat(), lng: ll.lng()};
110 addMarkers : function(markers) {
112 if (Ext.isArray(markers)){
113 for (var i = 0; i < markers.length; i++) {
114 var mkr_point = new GLatLng(markers[i].lat,markers[i].lng);
115 this.addMarker(mkr_point,markers[i].marker,false,markers[i].setCenter, markers[i].listeners);
120 addMarker : function(point, marker, clear, center, listeners){
122 Ext.applyIf(marker,G_DEFAULT_ICON);
125 this.getMap().clearOverlays();
127 if (center === true) {
128 this.getMap().setCenter(point, this.zoomLevel);
131 var mark = new GMarker(point,marker);
132 if (typeof listeners === 'object'){
133 for (evt in listeners) {
134 GEvent.bind(mark, evt, this, listeners[evt]);
137 this.getMap().addOverlay(mark);
140 addMapControls : function(){
142 if (this.gmapType === 'map') {
143 if (Ext.isArray(this.mapControls)) {
144 for(i=0;i<this.mapControls.length;i++){
145 this.addMapControl(this.mapControls[i]);
147 }else if(typeof this.mapControls === 'string'){
148 this.addMapControl(this.mapControls);
149 }else if(typeof this.mapControls === 'object'){
150 this.getMap().addControl(this.mapControls);
155 addMapControl : function(mc){
157 var mcf = window[mc];
158 if (typeof mcf === 'function') {
159 this.getMap().addControl(new mcf());
163 addOptions : function(){
165 if (Ext.isArray(this.mapConfOpts)) {
167 for(i=0;i<this.mapConfOpts.length;i++){
168 this.addOption(this.mapConfOpts[i]);
170 }else if(typeof this.mapConfOpts === 'string'){
171 this.addOption(this.mapConfOpts);
175 addOption : function(mc){
177 var mcf = this.getMap()[mc];
178 if (typeof mcf === 'function') {
183 geoCodeLookup : function(addr) {
185 this.geocoder = new GClientGeocoder();
186 this.geocoder.getLocations(addr, this.addAddressToMap.createDelegate(this));
189 addAddressToMap : function(response) {
191 if (!response || response.Status.code != 200) {
192 Ext.MessageBox.alert('Error', 'Code '+response.Status.code+' Error Returned');
194 place = response.Placemark[0];
195 addressinfo = place.AddressDetails;
196 accuracy = addressinfo.Accuracy;
197 if (accuracy === 0) {
198 Ext.MessageBox.alert('Unable to Locate Address', 'Unable to Locate the Address you provided');
201 Ext.MessageBox.alert('Address Accuracy', 'The address provided has a low accuracy.<br><br>Level '+accuracy+' Accuracy (8 = Exact Match, 1 = Vague Match)');
203 point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
204 if (typeof this.setCenter.marker === 'object' && typeof point === 'object'){
205 this.addMarker(point,this.setCenter.marker,this.setCenter.marker.clear,true, this.setCenter.listeners);
215 Ext.reg('gmappanel', Ext.ux.GMapPanel);