1. #11
    Sencha User cdg10620's Avatar
    Join Date
    Feb 2010
    Location
    Houston, Tx
    Posts
    8
    Vote Rating
    0
    cdg10620 is on a distinguished road

      0  

    Default


    @VinylFox, is there any update on when a compatible version will be available?

    Thanks.

  2. #12
    Sencha User cdg10620's Avatar
    Join Date
    Feb 2010
    Location
    Houston, Tx
    Posts
    8
    Vote Rating
    0
    cdg10620 is on a distinguished road

      0  

    Default ExtJs 4 with Google Maps v3

    ExtJs 4 with Google Maps v3


    I've been trying to get the GMapPanel created by @VinylFox working with ExtJs 4 and Google Maps V3. I edited the GMapPanel.js source and finally got it to load. I have the source as follows:

    Code:
    Ext.namespace('Ext.ux.panel');
        /**
         * MODIFIED: CDG10620
         * Edited source to make compatible with ExtJS.
         * Added support for gmapType: 'satellite' to enable the satellite map on load.
         */
    
    
    Ext.define( 'Ext.ux.GMapPanel', {
        extend: 'Ext.panel.Panel',
        /**
         * @cfg {Boolean} border
         * Defaults to <tt>false</tt>.  See {@link Ext.Panel}.<code>{@link Ext.Panel#border border}</code>.
         */
        border: false,
    
    
        /**
         * @cfg {Array} respErrors
         * An array of msg/code pairs.
         */
        respErrors: [{
                code: 'UNKNOWN_ERROR',
                msg: 'A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known.' 
            },{
                code: 'ERROR',
                msg: 'There was a problem contacting the Google servers.'
            },{
                code: 'ZERO_RESULTS',
                msg: 'The request did not encounter any errors but returns zero results.'
            },{
                code: 'INVALID_REQUEST',
                msg: 'This request was invalid.' 
            },{
                code: 'REQUEST_DENIED',
                msg: 'The webpage is not allowed to use the geocoder for some reason.' 
            },{
                code: 'OVER_QUERY_LIMIT',
                msg: 'The webpage has gone over the requests limit in too short a period of time.' 
        }],
        /**
         * @cfg {Array} locationTypes
         * An array of msg/code/level pairs.
         */
        locationTypes: [{
                level: 4,
                code: 'ROOFTOP',
                msg: 'The returned result is a precise geocode for which we have location information accurate down to street address precision.' 
            },{
                level: 3,
                code: 'RANGE_INTERPOLATED',
                msg: 'The returned result reflects an approximation (usually on a road) interpolated between two precise points (such as intersections). Interpolated results are generally returned when rooftop geocodes are unavailable for a street address.'
            },{
                level: 2,
                code: 'GEOMETRIC_CENTER',
                msg: 'The returned result is the geometric center of a result such as a polyline (for example, a street) or polygon (region).'
            },{
                level: 1,
                code: 'APPROXIMATE',
                msg: 'The returned result is approximate.' 
        }],
        /**
         * @cfg {String} respErrorTitle
         * Defaults to <tt>'Error'</tt>.
         */
        respErrorTitle : 'Error',
        /**
         * @cfg {String} geoErrorMsgUnable
         * Defaults to <tt>'Unable to Locate the Address you provided'</tt>.
         */
        geoErrorMsgUnable : 'Unable to Locate the Address you provided',
        /**
         * @cfg {String} geoErrorTitle
         * Defaults to <tt>'Address Location Error'</tt>.
         */
        geoErrorTitle : 'Address Location Error',
        /**
         * @cfg {String} geoErrorMsgAccuracy
         * Defaults to <tt>'The address provided has a low accuracy.<br><br>{0} Accuracy.'</tt>.
         * <div class="mdetail-params"><ul>
         * <li><b><code>ROOFTOP</code></b> : <div class="sub-desc"><p>
         * The returned result is a precise geocode for which we have location information accurate down to street address precision.
         * </p></div></li>
         * <li><b><code>RANGE_INTERPOLATED</code></b> : <div class="sub-desc"><p>
         * The returned result reflects an approximation (usually on a road) interpolated between two precise points (such as intersections). Interpolated results are generally returned when rooftop geocodes are unavailable for a street address.
         * </p></div></li>
         * <li><b><code>GEOMETRIC_CENTER</code></b> : <div class="sub-desc"><p>
         * The returned result is the geometric center of a result such as a polyline (for example, a street) or polygon (region).
         * </p></div></li>
         * <li><b><code>APPROXIMATE</code></b> : <div class="sub-desc"><p>
         * The returned result is approximate.
         * </p></div></li>
         * </ul></div>
         */
        geoErrorMsgAccuracy : 'The address provided has a low accuracy.<br><br>"{0}" Accuracy.<br><br>{1}',
        /**
         * @cfg {String} gmapType
         * The type of map to display, generic options available are: 'map', 'panorama'.
         * Defaults to <tt>'map'</tt>. 
         * More specific maps can be used by specifying the google map type:
         * <div class="mdetail-params"><ul>
         * <li><b><code>G_NORMAL_MAP</code></b> : <div class="sub-desc"><p>
         * Displays the default road map view
         * </p></div></li>
         * <li><b><code>G_SATELLITE_MAP</code></b> : <div class="sub-desc"><p>
         * Displays Google Earth satellite images
         * </p></div></li>
         * <li><b><code>G_HYBRID_MAP</code></b> : <div class="sub-desc"><p>
         * Displays a mixture of normal and satellite views
         * </p></div></li>
         * <li><b><code>G_DEFAULT_MAP_TYPES</code></b> : <div class="sub-desc"><p>
         * Contains an array of the above three types, useful for iterative processing.
         * </p></div></li>
         * <li><b><code>G_PHYSICAL_MAP</code></b> : <div class="sub-desc"><p>
         * Displays a physical map based on terrain information. 
         * </p></div></li>
         * <li><b><code>G_MOON_ELEVATION_MAP</code></b> : <div class="sub-desc"><p>
         * Displays a shaded terrain map of the surface of the Moon, color-coded by altitude.
         * </p></div></li>
         * <li><b><code>G_MOON_VISIBLE_MAP</code></b> : <div class="sub-desc"><p>
         * Displays photographic imagery taken from orbit around the moon.
         * </p></div></li>
         * <li><b><code>G_MARS_ELEVATION_MAP</code></b> : <div class="sub-desc"><p>
         * Displays a shaded terrain map of the surface of Mars, color-coded by altitude.
         * </p></div></li>
         * <li><b><code>G_MARS_VISIBLE_MAP</code></b> : <div class="sub-desc"><p>
         * Displays photographs taken from orbit around Mars.
         * </p></div></li>
         * <li><b><code>G_MARS_INFRARED_MAP</code></b> : <div class="sub-desc"><p>
         * Displays a shaded infrared map of the surface of Mars, where warmer areas appear brighter and colder areas appear darker.
         * </p></div></li>
         * <li><b><code>G_SKY_VISIBLE_MAP</code></b> : <div class="sub-desc"><p>
         * Displays a mosaic of the sky, as seen from Earth, covering the full celestial sphere.
         * </p></div></li>
         * </ul></div>
         * Sample usage:
         * <pre><code>
         * gmapType: G_MOON_VISIBLE_MAP
         * </code></pre>
         */
        gmapType : 'map',
        /**
         * @cfg {Object} setCenter
         * The initial center location of the map. The map needs to be centered before it can be used.
         * A marker is not required to be specified. 
         * More markers can be added to the map using the <code>{@link #markers}</code> array.
         * For example:
         * <pre><code>
    setCenter: {
        geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA',
        marker: {title: 'Fenway Park'}
    },
    
    
    // or just specify lat/long
    setCenter: {
        lat: 42.345573,
        lng: -71.098326
    }
         * </code></pre>
         */
        /**
         * @cfg {Number} zoomLevel
         * The zoom level to initialize the map at, generally between 1 (whole planet) and 40 (street).
         * Also used as the zoom level for panoramas, zero specifies no zoom at all.
         * Defaults to <tt>3</tt>.
         */
        zoomLevel: 3,
        /**
         * @cfg {Number} yaw
         * The Yaw, or rotational direction of the users perspective in degrees. Only applies to panoramas.
         * Defaults to <tt>180</tt>.
         */
        yaw: 180,
        /**
         * @cfg {Number} pitch
         * The pitch, or vertical direction of the users perspective in degrees.
         * Defaults to <tt>0</tt> (straight ahead). Valid values are between +90 (straight up) and -90 (straight down). 
         */
        pitch: 0,
        /**
         * @cfg {Boolean} displayGeoErrors
         * True to display geocoding errors to the end user via a message box.
         * Defaults to <tt>false</tt>.
         */
        displayGeoErrors: false,
        /**
         * @cfg {Boolean} minGeoAccuracy
         * The level to display an accuracy error below. Defaults to <tt>ROOFTOP</tt>. For additional information
         * see <a href="http://code.google.com/apis/maps/documentation/reference.html#GGeoAddressAccuracy">here</a>.
         */
        minGeoAccuracy: 'ROOFTOP',
        /**
         * @cfg {Array} mapConfOpts
         * Array of strings representing configuration methods to call, a full list can be found
         * <a href="http://code.google.com/apis/maps/documentation/reference.html#GMap2">here</a>.
         * For example:
         * <pre><code>
         * mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
         * </code></pre>
         */
        /**
         * @cfg {Array} mapControls
         * Array of strings representing map controls to initialize, a full list can be found
         * <a href="http://code.google.com/apis/maps/documentation/reference.html#GControlImpl">here</a>.
         * For example:
         * <pre><code>
         * mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl']
         * </code></pre>
         */
        /**
         * @cfg {Array} markers
         * Markers may be added to the map. Instead of specifying <code>lat</code>/<code>lng</code>,
         * geocoding can be specified via a <code>geoCodeAddr</code> string.
         * For example:
         * <pre><code>
    markers: [{
        //lat: 42.339641,
        //lng: -71.094224,
        // instead of lat/lng:
        geoCodeAddr: '465 Huntington Avenue, Boston, MA, 02215-5597, USA',
        marker: {title: 'Boston Museum of Fine Arts'},
        listeners: {
            click: function(e){
                Ext.Msg.alert('Its fine', 'and its art.');
            }
        }
    },{
        lat: 42.339419,
        lng: -71.09077,
        marker: {title: 'Northeastern University'}
    }]
         * </code></pre>
         */
        // private
        mapDefined: false,
        // private
        mapDefinedGMap: false,
    
    
        initComponent: function(){
            this.addEvents(
                /**
                 * @event mapready
                 * Fires when the map is ready for interaction
                 * @param {GMapPanel} this
                 * @param {GMap} map
                 */
                'mapready',
                /**
                 * @event apiready
                 * Fires when the Google Maps API is loaded
                 */
                'apiready'
            );
            
            Ext.applyIf(this,{
              markers: [],
              cache: {
                  marker: [],
                  polyline: [],
                  infowindow: []
              }
            });
            
            this.callParent(arguments);     
    
    
            if (window.google && window.google.maps){
              this.on('afterrender', this.apiReady, this);
            }else{
              window.gmapapiready = Ext.bind( this.apiReady, this );
              this.buildScriptTag('http://maps.google.com/maps/api/js?sensor=false&callback=gmapapiready');
            }
        },
    
    
        apiReady : function(){
            
            if (this.rendered){
              
              (Ext.Function.defer(function(){
              
              var mapType;
              switch(this.gmapType){
                case 'map':
                    mapType = google.maps.MapTypeId.ROADMAP;
                    break;
                case 'satellite':
                    mapType = google.maps.MapTypeId.SATELLITE;
                    break;
                case 'hybrid':
                    mapType = google.maps.MapTypeId.HYBRID;
                    break;
              }
    
    
              if (typeof mapType === 'string' && mapType != ''){
                  this.gmap = new google.maps.Map(this.body.dom, {zoom:this.zoomLevel,mapTypeId:mapType});
                  this.mapDefined = true;
                  this.mapDefinedGMap = true;
              }
              
              if (this.gmapType === 'panorama'){
                  this.gmap = new GStreetviewPanorama(this.body.dom);
                  this.mapDefined = true;
              }
      
              if (!this.mapDefined && this.gmapType){
                 this.gmap = new google.maps.Map(this.body.dom, {zoom:this.zoomLevel,mapTypeId: google.maps.MapTypeId.ROADMAP});
                 this.gmap.setMapTypeId(this.gmapType);
                 this.mapDefined = true;
                 this.mapDefinedGMap = true;
              }
    
    
              google.maps.event.addListenerOnce( this.getMap(), 'tilesloaded', Ext.bind( this.onMapReady, this ) );
              google.maps.event.addListener( this.getMap(), 'dragend', Ext.bind( this.dragEnd, this ) );
              
              if (typeof this.setCenter === 'object') {
                  if (typeof this.setCenter.geoCodeAddr === 'string'){
                      this.geoCodeLookup(this.setCenter.geoCodeAddr, this.setCenter.marker, false, true, this.setCenter.listeners);
                  }else{
                      if (this.gmapType === 'map' || this.gmapType === 'satellite' || this.gmapType === 'hybrid'){
                          var point = new google.maps.LatLng(this.setCenter.lat,this.setCenter.lng);
                          this.getMap().setCenter(point, this.zoomLevel);
                          this.lastCenter = point;  
                      }
                      if (typeof this.setCenter.marker === 'object' && typeof point === 'object') {
                          this.addMarker(point, this.setCenter.marker, this.setCenter.marker.clear);
                      }
                  }
                  if (this.gmapType === 'panorama'){
                      this.getMap().setLocationAndPOV(new google.maps.LatLng(this.setCenter.lat,this.setCenter.lng), {yaw: this.yaw, pitch: this.pitch, zoom: this.zoomLevel});
                  }
              }
              
            }, 200, this));
            }else{
              this.on('afterrender', Ext.Function.defer(this.apiReady, 200, this), this);
            }
        },
        // private
        afterRender : function(){
            
            var wh = this.ownerCt.getSize();
            Ext.applyIf(this, wh);
            
            Ext.ux.GMapPanel.superclass.afterRender.call(this);
    
    
        },
        // private
        buildScriptTag: function(filename, callback) {
            var script  = document.createElement('script'),
            head        = document.getElementsByTagName("head")[0];
            script.type = "text/javascript";
            script.src  = filename;    
            
            return head.appendChild(script);
        },
        // private
        onMapReady : function(){
                    
            this.addMapControls();
            this.addOptions();
            
            this.addMarkers(this.markers);
            
            this.fireEvent('mapready', this, this.getMap());
            
        },
        // private
        onResize : function(w, h){
            
            Ext.ux.GMapPanel.superclass.onResize.call(this, w, h);
    
    
            // check for the existance of the google map in case the onResize fires too early
            if (typeof this.getMap() == 'object') {
                google.maps.event.trigger(this.getMap(), 'resize');
                if (this.lastCenter){
                  this.getMap().setCenter(this.lastCenter, this.zoomLevel);
                }
            }
    
    
        },
        // private
        setSize : function(width, height, animate){
            
            Ext.ux.GMapPanel.superclass.setSize.call(this, width, height, animate);
    
    
            // check for the existance of the google map in case setSize is called too early
            if (Ext.isObject(this.getMap())) {
                google.maps.event.trigger(this.getMap(), 'resize');
                if (this.lastCenter){
                  this.getMap().setCenter(this.lastCenter, this.zoomLevel);
                }
            }
            
        },
        // private
        dragEnd: function(){
          this.lastCenter = this.getMap().getCenter();
        },
        /**
         * Returns the current google map which can be used to call Google Maps API specific handlers.
         * @return {GMap} this
         */
        getMap : function(){
            
            return this.gmap;
            
        },
        /**
         * Returns the maps center as a GLatLng object
         * @return {GLatLng} this
         */
        getCenter : function(){
            
            return this.getMap().getCenter();
            
        },
        /**
         * Returns the maps center as a simple object
         * @return {Object} this has lat and lng properties only
         */
        getCenterLatLng : function(){
            
            var ll = this.getCenter();
            return {lat: ll.lat(), lng: ll.lng()};
            
        },
        /**
         * Creates markers from the array that is passed in. Each marker must consist of at least
         * <code>lat</code> and <code>lng</code> properties or a <code>geoCodeAddr</code>.
         * @param {Array} markers an array of marker objects
         */
        addMarkers : function(markers) {
            if (Ext.isArray(markers)){
                for (var i = 0; i < markers.length; i++) {
                    if (markers[i]) {
                        if (typeof markers[i].geoCodeAddr == 'string') {
                            this.geoCodeLookup(markers[i].geoCodeAddr, markers[i].marker, false, markers[i].setCenter, markers[i].listeners);
                        } else {
                            var mkr_point = new google.maps.LatLng(markers[i].lat, markers[i].lng);
                            this.addMarker(mkr_point, markers[i].marker, false, markers[i].setCenter, markers[i].listeners);
                        }
                    }
                }
            }
            
        },
        /**
         * Creates a single marker.
         * @param {Object} point a GLatLng point
         * @param {Object} marker a marker object consisting of at least lat and lng
         * @param {Boolean} clear clear other markers before creating this marker
         * @param {Boolean} center true to center the map on this marker
         * @param {Object} listeners a listeners config
         */
        addMarker : function(point, marker, clear, center, listeners){
            
            Ext.applyIf(marker,{});
    
    
            if (clear === true){
                this.clearMarkers();
            }
            if (center === true) {
                this.getMap().setCenter(point, this.zoomLevel)
                this.lastCenter = point;
            }
    
    
            var mark = new google.maps.Marker(Ext.apply(marker, {
                position: point
            }));
            
            if (marker.infoWindow){
                this.createInfoWindow(marker.infoWindow, point, mark);
            }
            
            this.cache.marker.push(mark);
            mark.setMap(this.getMap());
    
    
            if (typeof listeners === 'object'){
                for (evt in listeners) {
                    google.maps.event.addListener(mark, evt, listeners[evt]);
                }
            }
            
            return mark;
            
        },
        /**
         * Creates a single polyline.
         * @param {Array} points an array of polyline points
         * @param {Object} linestyle an object defining the line style to use
         */
        addPolyline : function(points, linestyle){
            
            var plinepnts = new google.maps.MVCArray, pline, linestyle = linestyle ? linestyle : {
                strokeColor: '#FF0000',
                strokeOpacity: 1.0,
                strokeWeight: 2
            };
            
            Ext.each(points, function(point){
                plinepnts.push(new google.maps.LatLng(point.lat, point.lng));
            }, this);
            
            var pline = new google.maps.Polyline(Ext.apply({
              path: plinepnts
            },linestyle));
            
            this.cache.polyline.push(pline);
            
            pline.setMap(this.getMap());
    
    
        },
        /**
         * Creates an Info Window.
         * @param {Object} inwin an Info Window configuration
         * @param {GLatLng} point the point to show the Info Window at
         * @param {GMarker} marker a marker to attach the Info Window to
         */
        createInfoWindow : function(inwin, point, marker){
            
            var me = this, infoWindow = new google.maps.InfoWindow({
                content: inwin.content,
                position: point
            });
            
            if (marker) {
                google.maps.event.addListener(marker, 'click', function(){
                    me.hideAllInfoWindows();
                    infoWindow.open(me.getMap());
                });
            }
            
            this.cache.infowindow.push(infoWindow);
    
    
            return infoWindow;
    
    
        },
        // private
        hideAllInfoWindows : function(){
            for (var i = 0; i < this.cache.infowindow.length; i++) {
                this.cache.infowindow[i].close();
            }
        },
        // private
        clearMarkers : function(){
            
            this.hideAllInfoWindows();
            this.hideMarkers();
    
    
        },
        // private
        hideMarkers : function(){
            Ext.each(this.cache.marker, function(mrk){
                mrk.setMap(null);
            });
        },
        // private
        showMarkers : function(){
            Ext.each(this.cache.marker, function(mrk){
                mrk.setMap(this.getMap());
            },this);
        },
        // private
        addMapControls : function(){
            
            if (this.gmapType === 'map') {
                if (Ext.isArray(this.mapControls)) {
                    for(i=0;i<this.mapControls.length;i++){
                        //this.addMapControl(this.mapControls[i]);
                    }
                }else if(typeof this.mapControls === 'string'){
                    //this.addMapControl(this.mapControls);
                }else if(typeof this.mapControls === 'object'){
                    //this.getMap().add_control(this.mapControls);
                }
            }
            
        },
        /**
         * Adds a GMap control to the map.
         * @param {String} mc a string representation of the control to be instantiated.
         */
        addMapControl : function(mc){
            
            var mcf = window[mc];
            if (typeof mcf === 'function') {
                //this.getMap().addControl(new mcf());
            }    
            
        },
        // private
        addOptions : function(){
            
            if (Ext.isArray(this.mapConfOpts)) {
                var mc;
                for(i=0;i<this.mapConfOpts.length;i++){
                    //this.addOption(this.mapConfOpts[i]);
                }
            }else if(typeof this.mapConfOpts === 'string'){
                //this.addOption(this.mapConfOpts);
            }        
            
        },
        /**
         * Adds a GMap option to the map.
         * @param {String} mo a string representation of the option to be instantiated.
         */
        addOption : function(mo){
            
            var mof = this.getMap()[mo];
            if (typeof mof === 'function') {
                this.getMap()[mo]();
            }    
            
        },
        /**
         * Looks up and address and optionally add a marker, center the map to this location, or
         * clear other markers. Sample usage:
         * <pre><code>
    buttons: [
        {
            text: 'Fenway Park',
            handler: function(){
                var addr = '4 Yawkey Way, Boston, MA, 02215-3409, USA';
                Ext.getCmp('my_map').geoCodeLookup(addr, undefined, false, true, undefined);
            }
        },{
            text: 'Zoom Fenway Park',
            handler: function(){
                Ext.getCmp('my_map').zoomLevel = 19;
                var addr = '4 Yawkey Way, Boston, MA, 02215-3409, USA';
                Ext.getCmp('my_map').geoCodeLookup(addr, undefined, false, true, undefined);
            }
        },{
            text: 'Low Accuracy',
            handler: function(){
                Ext.getCmp('my_map').geoCodeLookup('Paris, France', undefined, false, true, undefined);
            }
        },{
    
    
            text: 'Bogus Address',
            handler: function(){
                var addr = 'Some Fake, Address, For, Errors';
                Ext.getCmp('my_map').geoCodeLookup(addr, undefined, false, true, undefined);
            }
        }
    ]
         * </code></pre>
         * @param {String} addr the address to lookup.
         * @param {Object} marker the marker to add (optional).
         * @param {Boolean} clear clear other markers before creating this marker
         * @param {Boolean} center true to set this point as the center of the map.
         * @param {Object} listeners a listeners config
         */
        geoCodeLookup : function(addr, marker, clear, center, listeners) {
            
            if (!this.geocoder) {
                this.geocoder = new google.maps.Geocoder();
            }
            this.geocoder.geocode({
                    address: addr
                }, Ext.bind( this.addAddressToMap, this, [addr, marker, clear, center, listeners], true));
            
        },
          // private 
          centerOnClientLocation : function(){
              this.getClientLocation(function(loc){
                  var point = new google.maps.LatLng(loc.latitude,loc.longitude);
            this.getMap().setCenter(point, this.zoomLevel);
            this.lastCenter = point;
              });
          },
          // private
          getClientLocation : function(fn, errorFn){
              if (!errorFn) {
              errorFn = Ext.emptyFn;
          }
              if (!this.clientGeo) {
                  this.clientGeo = google.gears.factory.create('beta.geolocation');
              }
              geo.getCurrentPosition(Ext.bind( fn, this), errorFn);
          },
        // private
        addAddressToMap : function(response, status, addr, marker, clear, center, listeners){
            if (!response || status !== 'OK') {
                this.respErrorMsg(status);
            }else{
                var place = response[0].geometry.location,
                          accuracy = this.getLocationTypeInfo(response[0].geometry.location_type,'level'),
                          reqAccuracy = this.getLocationTypeInfo(this.minGeoAccuracy,'level');
                if (accuracy === 0) {
                    this.geoErrorMsg(this.geoErrorTitle, this.geoErrorMsgUnable);
                }else{
                    if (accuracy < reqAccuracy) {
                        this.geoErrorMsg(this.geoErrorTitle, String.format(this.geoErrorMsgAccuracy, response[0].geometry.location_type, this.getLocationTypeInfo(response[0].geometry.location_type,'msg')));
                    }else{
                        point = new google.maps.LatLng(place.xa,place.za);
                        if (center){
                            this.getMap().setCenter(point, this.zoomLevel);
                            this.lastCenter = point;
                        }
                        if (typeof marker === 'object') {
                            if (!marker.title){
                                marker.title = response.formatted_address;
                            }
                            var mkr = this.addMarker(point, marker, clear, false, listeners);
                            if (marker.callback){
                              marker.callback.call(this, mkr, point);
                            }
                        }
                    }
                }
            }
            
        },
        // private
        geoErrorMsg : function(title,msg){
            if (this.displayGeoErrors) {
                Ext.MessageBox.alert(title,msg);
            }
        },
        // private
        respErrorMsg : function(code){
            Ext.each(this.respErrors, function(obj){
                if (code == obj.code){
                    Ext.MessageBox.alert(this.respErrorTitle, obj.msg);
                }
            }, this);
        },
        // private
        getLocationTypeInfo: function(location_type,property){
          var val = 0;
          Ext.each(this.locationTypes, function(itm){
            if (itm.code === location_type){
              val = itm[property];
            }
          });
          return val;
        }
    });
    I had to remove references to the .defer function and use Ext.Function.defer instead. Also, instead of using .createDelegate you should now use Ext.Bind. I have not extensively tested this so there may be issues.

    Hopefully others find this useful.

    -CDG10620
    Last edited by cdg10620; 17 Aug 2011 at 5:52 AM. Reason: Code formatting was off.

  3. #13
    Sencha Premium Member
    Join Date
    Mar 2010
    Location
    The Netherlands
    Posts
    77
    Vote Rating
    1
    siebe vos is on a distinguished road

      0  

    Default


    @CDG10620

    Thanks for modifying the GMapPanelV3 source into Ext4!

    Unfortunately I have a problem using the 'Ext.ux.GMapPanel':

    Does the setCenter work for you with the sample address that is in the source? I can't get the geoCodeAddr to work with any address:
    Code:
    {geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA',   marker: {title: 'Fenway Park'}}
    The setCenter with latitude / longitude works fine:
    Code:
    {lat: 42.345573,  lng: -71.098326}
    In the Ext3 version (Vinylfox) both worked for me. Do you have any suggestions?

    Thanks in advance!
    Last edited by siebe vos; 2 Nov 2011 at 3:16 AM. Reason: code lines where in between texts (not very clear for other readers)

  4. #14
    Sencha User cdg10620's Avatar
    Join Date
    Feb 2010
    Location
    Houston, Tx
    Posts
    8
    Vote Rating
    0
    cdg10620 is on a distinguished road

      0  

    Default


    @siebe vos

    I'm only using the set center portion of it. I have not needed to use the geoCodeAddr. This is my implementation.

    Code:
    this.map = Ext.create( 'Ext.ux.GMapPanel', {
        title: 'Google Maps',
        margins: '4 4 4 0',
        zoomLevel: 14,
        gmapType: 'map',
        id: 'googleMap',
        border: true,
        setCenter: {
            lat:  latVal, 
            lng:  lngVal
        }
    })
    In my code i'm also extending the Ext.ux.GMapPanel. I'll play around with that and try to see what the issue is.

    -CDG10620

  5. #15
    Sencha Premium Member
    Join Date
    Mar 2010
    Location
    The Netherlands
    Posts
    77
    Vote Rating
    1
    siebe vos is on a distinguished road

      0  

    Default


    @CDG10620 Thanks for your quick reply. Your sample works for me too (as I specified in #13), but I have a problem with the geoCodeAddr (looking up an address). Does that one work for you?

    Thanks again!

  6. #16
    Sencha User cdg10620's Avatar
    Join Date
    Feb 2010
    Location
    Houston, Tx
    Posts
    8
    Vote Rating
    0
    cdg10620 is on a distinguished road

      0  

    Default


    @siebe vos

    No it doesn't. Whenever I try to use the geoCodeAddr it is loading the panel but the map never loads up. I'll have to play around with it and see what is going on. Maybe @VinylFox or someone else will chime in.

    -CDG10620

  7. #17
    Sencha Premium Member
    Join Date
    Mar 2010
    Location
    The Netherlands
    Posts
    77
    Vote Rating
    1
    siebe vos is on a distinguished road

      0  

    Default


    @CDG10620
    Thanks for looking into this, I have the same behaviour. I hope you find a solution.
    Siebe

  8. #18
    Sencha Premium Member
    Join Date
    Mar 2010
    Location
    The Netherlands
    Posts
    77
    Vote Rating
    1
    siebe vos is on a distinguished road

      0  

    Default


    @CDG10620

    I found the problem: within method "addAddressToMap" line 13 must be changed from

    Code:
    point = new google.maps.LatLng(place.xa,place.za);
    into:
    Code:
    point = this.fixLatLng(place);
    to the class the old function fixLatLng must be added (see original source from Vinylfox):
    Code:
    fixLatLng: function (llo) {
        if (this.getMap().getMapTypeId() === 'SKY') {
            if (this.getMap().getCurrentMapType().QO == 'visible') {
                llo.lat(180 - llo.lat());
                llo.lng(180 - llo.lng());
            }
        }
        return llo;
    }
    Suggestion: you could add the alias 'widget.gmappanel' to the class (and remove the Ext.namespace in the top (not used?)

    Thanks!

    -Siebe
    Last edited by siebe vos; 2 Nov 2011 at 7:58 AM. Reason: added ext.namespace remark, duplicate code removed

  9. #19
    Sencha User cdg10620's Avatar
    Join Date
    Feb 2010
    Location
    Houston, Tx
    Posts
    8
    Vote Rating
    0
    cdg10620 is on a distinguished road

      0  

    Default


    @Siebe

    Nice find. I've changed my source and it works on my machine. Glad you found a fix for that.

  10. #20
    Sencha User
    Join Date
    Jan 2012
    Posts
    3
    Vote Rating
    0
    dagotodros is on a distinguished road

      0  

    Default


    Hi. I use ExtJS 4 with GMapPanel3. When I use method addPolyline I see error message - "An invalid or illegal string was specified" code: "12". What I do wrong?

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar