1. #11
    Touch Premium Member sean's Avatar
    Join Date
    Mar 2007
    Location
    Ashburn VA
    Posts
    120
    Vote Rating
    0
    sean is on a distinguished road

      0  

    Default


    Shea,

    This is a nice start. I used it as an aide to learn the google api internals. Whipped this up in a few hours time:

    http://mcdconsultingllc.com/demos/go...oogleMaps.html

    I added a couple of things that I needed, including the ability to pass in an string or array of strings to specify the various supported features like the google bar and continuous zoom . There is also a method to enable/disable a feature on the fly. I also added a mapTypes config option, something that can only be specified during the construction of the GMap2 instance, so that views beyond G_DEFAULT_MAP_TYPES can be supported, eg

    Code:
    mapTypes: G_DEFAULT_MAP_TYPES.concat(G_PHYSICAL_MAP),
    Finally I added a control config option that specifies the controls to be rendered on the Map by default, eg

    Code:
    controls: [
        new GLargeMapControl(), 
        new GScaleControl()
    ] ,
    I added methods to add/remove controls on the fly also.

    I'm thinking that I would also like to add the ability to relay all the GMap2 events. The api is pretty extensive so covering everything could prove to be laborious with the benefit of abstracting away most of the google API from users of the panel. Things start to get a little tricker when you cover markers, info windows, custom icons, etc. In any case just thought I would share.

    btw: I think the Gmap2 is consuming the click events. I have a (non functional) toolbar in my prototype with a menu. The menu doesn't hide when I click on the Panel. Need to look into this.

    Sean

  2. #12
    Sencha - Community Support Team VinylFox's Avatar
    Join Date
    Mar 2007
    Location
    Baltimore, MD
    Posts
    1,501
    Vote Rating
    8
    VinylFox will become famous soon enough VinylFox will become famous soon enough

      0  

    Default


    The 1st post has been updated with the improvements suggested by runnersixty and sean.

  3. #13
    Sencha User
    Join Date
    Mar 2007
    Posts
    464
    Vote Rating
    1
    JorisA is on a distinguished road

      0  

    Default


    Wouldn't it be better to use the google.maps namespace instead of all the global vars? For example var point = new google.maps.LatLng(lat, lon); instead of new GLatLng().
    Thats more est-ish as well.

  4. #14
    Sencha User
    Join Date
    Dec 2007
    Location
    Aubagne, France
    Posts
    347
    Vote Rating
    1
    mask_hot is on a distinguished road

      0  

    Default


    Hi, really nice ux!

    should it be possible to add a JSON store feature to add markers from a DB?

  5. #15
    Ext User EachOnSet's Avatar
    Join Date
    May 2008
    Location
    Quebec
    Posts
    8
    Vote Rating
    0
    EachOnSet is on a distinguished road

      0  

    Default


    Hello!

    I've got a problem when using Lat, Lng instead of an addresse in the setCenter. The map is loosing its controls. It also has been reported here : http://extjs.com/forum/showthread.php?p=206565

    Here's a snippet of the items :
    Code:
    {
                    xtype: 'gmappanel',
                    region: 'center',
                    zoomLevel: 17,
                    gmapType: 'map',
                    setCenter: {
                        lat: 46.779388,
                        lng: -71.269909
                    },
                    mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
                    mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
                    markers: [{
                        lat: 42.339641,
                        lng: -71.094224,
                        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'}
                    }]
                }
    Any ideas? Thank you!

  6. #16
    Sencha - Community Support Team VinylFox's Avatar
    Join Date
    Mar 2007
    Location
    Baltimore, MD
    Posts
    1,501
    Vote Rating
    8
    VinylFox will become famous soon enough VinylFox will become famous soon enough

      0  

    Default


    The 1st post has been updated with a fix to the bug found by EachOnSet.

    Basic documentation was also added to the code (in JSDoc format).

    @EachOnSet - please update this post with any other bugs you find - thanks.

  7. #17
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,680
    Vote Rating
    112
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      0  

    Default


    i really like this ux, good job!

    first of all, a small feature suggestion: i tried a window with the config-option maximable:true. On scaling fullscreen, the map did not resize properly, i guess it is not implemented yet, is it?

    the major point is: i would like to add routes. on code.google.com, i found an example like:

    Code:
            var map = new GMap2(document.getElementById("map_canvas"));
            map.setCenter(new GLatLng(37.4419, -122.1419), 13);
            var polyline = new GPolyline([
      		  new GLatLng(37.4419, -122.1419),
      		  new GLatLng(37.4519, -122.1519)
    		], "#ff0000", 10);
    		map.addOverlay(polyline);

    is this already possible with the ux (and if how?) or shall i try to add / extend this by myself?


    thanks, tobiu

  8. #18
    Ext User
    Join Date
    Aug 2008
    Posts
    1
    Vote Rating
    0
    ScarFreewill is on a distinguished road

      0  

    Default Delay on Script

    Delay on Script


    Thanks for the nice ux!

    My site is in an internal network some users have internet some don't. I wrote a message box that asks the user when they open the GMap to ask them if they want to active it.

    Code:
        loadMaps : function(){
            if(gmScriptActive) {
                this.createWindow();
            } else {
                Ext.Msg.confirm('Enable?', 'Do you want to enable Google Maps?', function(btn){
                    if (btn == 'yes'){
                        gmScriptActive = true;
                        document.getElementById(\"load-google-maps-here\").innerHTML = '<script src=\"http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=MYKEY\" type=\"text/javascript\"></script>';
                        this.createWindow();
                    }
                })
            }
        }
    If it is possable I'd like the load the script at that point, like you can se I'm using dom to print the js, but it doesn't load. Can I use a command within my js to exec an external script?

    ps sorry for being off-topic

    Thanks

  9. #19
    Ext User lokiofragnar's Avatar
    Join Date
    May 2008
    Location
    most of the time in Rotterdam, sometimes in Mendoza
    Posts
    10
    Vote Rating
    0
    lokiofragnar is on a distinguished road

      0  

    Default some points on the GMapPanel

    some points on the GMapPanel


    Hi VinylFox,

    I have been working with the GMapPanel for a few weeks now and I have a few points to make. Some bigger than others. Perhaps I misunderstand stuff please do flame :-).

    Here is the GMapPanel.js

    Code:
    /*
     * Ext JS Library 2.2
     * Copyright(c) 2006-2008, Ext JS, LLC.
     * licensing@extjs.com
     * 
     * http://extjs.com/license
     */
    
    /**
     * @author Shea Frederick
     */
    
    
    
    Ext.namespace('Ext.ux');
     
    /**
     *
     * @class GMapPanel
     * @extends Ext.Panel
     */
    Ext.ux.GMapPanel = Ext.extend(Ext.Panel, {
        initComponent : function(){
            
            var defConfig = {
                plain: true,
                zoomLevel: 3,
                yaw: 180,
                pitch: 0,
                zoom: 0,
                gmapType: 'map',
                border: false
            };
            
            Ext.applyIf(this,defConfig);
            
            Ext.ux.GMapPanel.superclass.initComponent.call(this);        
    
        },
        afterRender : function(){
            
            var wh = this.ownerCt.getSize();
            Ext.applyIf(this, wh);
            
            Ext.ux.GMapPanel.superclass.afterRender.call(this);    
            
            if (this.gmapType === 'map'){
                this.gmap = new GMap2(this.body.dom);
            }
            
            if (this.gmapType === 'panorama'){
                this.gmap = new GStreetviewPanorama(this.body.dom);
            }
            
            if (typeof this.addControl == 'object' && this.gmapType === 'map') {
                this.gmap.addControl(this.addControl);
            }
            
            if (typeof this.center === 'object') {
                if (typeof this.center.geoCodeAddr === 'string'){
                    this.geoCodeLookup(this.center.geoCodeAddr);
                }else{
                    if (this.gmapType === 'map'){
                        var point = new GLatLng(this.center.lat,this.center.lng);
                        this.gmap.setCenter(point, this.zoomLevel);    
                    }
                    if (typeof this.center.marker === 'object' && typeof point === 'object'){
                        this.addMarker(point,this.center.marker,this.center.marker.clear);
                    }
                }
                    if (this.gmapType === 'panorama'){
                        this.gmap.setLocationAndPOV(new GLatLng(this.center.lat,this.center.lng), {yaw: this.yaw, pitch: this.pitch, zoom: this.zoom});
                    }
                }
    
                    GEvent.bind(this.gmap, 'load', this, function(){
                        this.onMapReady();
                    });
    
                },
        
                onMapReady : function(){
                    this.addMarkers(this.markers);
                    this.addMapControls();
                    this.addOptions();  
                },
        
                repaint: function(zoomlevel){
                    this.gmap.clearOverlays();
                    if(zoomlevel){
                       this.zoomLevel = zoomlevel;
                       this.gmap.setZoom(zoomlevel); 
                    }
                    this.onMapReady();        
                    this.toCenter();
                },
        
                onResize : function(w, h){
    
                    if (typeof this.getMap() == 'object') {
                        this.gmap.checkResize();
                    }
            
                    Ext.ux.GMapPanel.superclass.onResize.call(this, w, h);
    
                },
                setSize : function(width, height, animate){
            
                    if (typeof this.getMap() == 'object') {
                        this.gmap.checkResize();
                    }
            
                    Ext.ux.GMapPanel.superclass.setSize.call(this, width, height, animate);
            
                },
                getMap : function(){
            
                    return this.gmap;
            
                },
                getCenter : function(){
            
                    return this.getMap().getCenter();
            
                 },
                 
                setCenter: function(center, zoomLevel){
                    if(zoomLevel){
                        this.zoomLevel = zoomLevel;
                    }
                    this.center = center;
                    this.repaint();
                },
        
                toCenter: function(){
                    if (typeof this.center === 'object') {
                        if (typeof this.center.geoCodeAddr === 'string'){
                            this.geoCodeLookup(this.center.geoCodeAddr);
                        }else{
                            if (this.gmapType === 'map'){
                                var point = new GLatLng(this.center.lat,this.center.lng);
                                this.gmap.setCenter(point, this.zoomLevel);    
                            }
                            if (typeof this.center.marker === 'object' && typeof point === 'object'){
                                this.addMarker(point,this.center.marker,this.center.marker.clear);
                            }
                        }
                        if (this.gmapType === 'panorama'){
                            this.gmap.setLocationAndPOV(new GLatLng(this.center.lat,this.center.lng), {yaw: this.yaw, pitch: this.pitch, zoom: this.zoom});
                        }
                    }
                },
       
                getCenterLatLng : function(){
            
                    var ll = this.getCenter();
                    return {lat: ll.lat(), lng: ll.lng()};
            
                },
                addMarkers : function(markers) {
            
                    if (Ext.isArray(markers)){
                        for (var i = 0; i < markers.length; i++) {
                            var mkr_point = new GLatLng(markers[i].lat,markers[i].lng);
                            this.addMarker(
                              mkr_point,
                              markers[i].marker,
                              false,
                              markers[i].setCenter, 
                              markers[i].listeners,
                              markers[i].options
                          );
                        }
                    }
            
                },
                
                setMarkers : function(markers, zoomlevel) {
                    if(zoomlevel){
                        this.zoomLevel = zoomlevel;
                    }
                    this.markers = markers;
                    this.repaint();
                },
                
                addMarker : function(point, marker, clear, center, listeners, options){
            
                    Ext.applyIf(marker,G_DEFAULT_ICON);
    
                    if (clear === true){
                        this.getMap().clearOverlays();
                    }
                    if (center === true) {
                        this.getMap().setCenter(point, this.zoomLevel);
                    }
    
                    
                    var mark = new GMarker(point, marker);
                    
                    if (typeof listeners === 'object'){
                        for (evt in listeners) {
                            // changed the event that should fire from
                            // this to mark. So that the mark can be configured
                            // to handle the request.
                            GEvent.bind(mark, evt, mark, listeners[evt]);
                        }
                    }
                    
                    if(options){
                        mark.options = options;
                    }
                    
                    this.getMap().addOverlay(mark);
    
                },
                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().addControl(this.mapControls);
                        }
                    }
            
                },
                addMapControl : function(mc){
            
                    var mcf = window[mc];
                    if (typeof mcf === 'function') {
                        this.getMap().addControl(new mcf());
                    }    
            
                },
                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);
                    }        
            
                },
                addOption : function(mc){
            
                    var mcf = this.getMap()[mc];
                    if (typeof mcf === 'function') {
                        this.getMap()[mc]();
                    }    
            
                },
                geoCodeLookup : function(addr) {
                    this.geocoder = new GClientGeocoder();
                    this.geocoder.getLocations(addr, this.addAddressToMap.createDelegate(this));
            
                },
                addAddressToMap : function(response) {
            
                    if (!response || response.Status.code != 200) {
                        Ext.MessageBox.alert('Error', 'Code '+response.Status.code+' Error Returned');
                    }else{
                        place = response.Placemark[0];
                        addressinfo = place.AddressDetails;
                        accuracy = addressinfo.Accuracy;
                        if (accuracy === 0) {
                            Ext.MessageBox.alert('Unable to Locate Address', 'Unable to Locate the Address you provided');
                        }else{
                            point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
                            if (typeof this.center.marker === 'object' && typeof point === 'object'){
                                this.addMarker(point,this.center.marker,this.center.marker.clear,true, this.center.listeners);
                            }
                        }
                    }
            
                }
     
            });
    
            Ext.reg('gmappanel',Ext.ux.GMapPanel);
    1. The setCenter property is now center
    Not a big deal but I needed a way to adjust the center of the map. The only way I could figure was to change the property setCenter in to center and create a setCenter method.


    2. repainting
    The current panel more or less assumes that all content is static. The problem I am working on needed the ability to change the content. So I created a repaint method. Also I created a setMarkers method that takes an array with marker information, throws out the old markers and paints the new ones.

    3. Marker events
    The marker event handling was all done by the panel. This did not suit my application. It also seems to go a bit a against the object concepts. So I changed the way events are added to Markers making the GMarker the element that receives the event. But this created an extra problem. When I handle the event I need more information than what is currently stored in the GMarker. I added an (optional) options object to the marker array. These options are put in the GMarker and can be used by the eventhandlers to call other actions.

    4. Level of detail for resolution of addresses.
    The check on the level of detail for an address is removed. (not a huge deal, but I used Dutch zipcodes and they kept giving problems).

    These changes have made it possible to use an XMLReader to get marker info from my own application server and show it on the GMapPanel. I can also change the center without experiencing problems.

    Here is my wishlist (I am going to see what I can do about it).

    - I would like to use the GMapPanel without having to worry about the internal workings of the Map. Much like i use a GridPanel. In order to do this i would like to 'broadcast' the map events from the underlying googlemap. This should not be extremely difficult.

    - I would like to create a Ext.ux.GoogleMarker that holds all the application info for a marker on a GoogleMap. This way I can introduce events and event handling that goes beyond the 'GMapPanel' made markers, without having to change the GMapPanel code. (see my previous point on the event handling and the options' This would not have to be very diificult either. I will see what I can do about this in the next weeks.

    That's about it for now. As a said I may be wrong on a lot of this stuff and I may have gone about a lot of things the wrong way. So feel free to correct.

    cheers,
    Aad

  10. #20

    Default How to convert street address to LatLng - getLatLng

    How to convert street address to LatLng - getLatLng


    Great extension!

    I've got a working page, but when I add markers I only have the street address from our database, and I'm having trouble converting it to lat/lng for the addMarker function.

    I've tried using getLatLng but am running into problems. I've tried about 5 different solutions to no avail. The Google maps API doc page's examples don't match the way ExtJS's is structured.

    Thanks in advance! Our users will LOVE this app!

Thread Participants: 98

  1. Animal (5 Posts)
  2. willgillen (1 Post)
  3. pop k (1 Post)
  4. sean (1 Post)
  5. dolittle (1 Post)
  6. JorisA (2 Posts)
  7. tobiu (1 Post)
  8. mauro.pelucchi (1 Post)
  9. bhaidaya (1 Post)
  10. yuki (1 Post)
  11. z1nkum (1 Post)
  12. fsa3 (1 Post)
  13. hendricd (2 Posts)
  14. xantus (1 Post)
  15. dodgie (1 Post)
  16. runnersixty (1 Post)
  17. TigersWay (2 Posts)
  18. bclinton (4 Posts)
  19. luisparada (1 Post)
  20. lorezyra (4 Posts)
  21. mask_hot (1 Post)
  22. ghutchens (1 Post)
  23. josh803316 (1 Post)
  24. BuckBazooka (2 Posts)
  25. achebe (2 Posts)
  26. mnask (1 Post)
  27. GobbaF (4 Posts)
  28. NeonMonk (1 Post)
  29. nunziofiore (2 Posts)
  30. sabiola (1 Post)
  31. Joyfulbob (7 Posts)
  32. JoyfulBobHome (1 Post)
  33. davidrolli (3 Posts)
  34. nctag (2 Posts)
  35. keckeroo (2 Posts)
  36. moegal (4 Posts)
  37. EzBulka (2 Posts)
  38. lokiofragnar (3 Posts)
  39. mnask79 (9 Posts)
  40. EachOnSet (1 Post)
  41. abraxxa (15 Posts)
  42. stolsma (4 Posts)
  43. IT100 (3 Posts)
  44. Scorpie (1 Post)
  45. cyfl (1 Post)
  46. LouiSe (3 Posts)
  47. Matt Bittner (2 Posts)
  48. rb4i (1 Post)
  49. ScarFreewill (1 Post)
  50. prabhukm (3 Posts)
  51. arthurakay (1 Post)
  52. ExtSwede (1 Post)
  53. f1xxx3r (1 Post)
  54. mirgor (1 Post)
  55. Daz (3 Posts)
  56. rlegend (6 Posts)
  57. veerugadde (4 Posts)
  58. sprestel (1 Post)
  59. nikhilkrishnan (1 Post)
  60. Stju (4 Posts)
  61. rubyaryat (1 Post)
  62. daveh0 (3 Posts)
  63. whdanj (2 Posts)
  64. Jangla (15 Posts)
  65. haggai (1 Post)
  66. ripun008 (7 Posts)
  67. treadmill (5 Posts)
  68. Antjac (1 Post)
  69. talha06 (2 Posts)
  70. The Transporter (2 Posts)
  71. ADP-LMY (1 Post)
  72. madcity (2 Posts)
  73. Margusja (13 Posts)
  74. presedo (1 Post)
  75. satishyl (2 Posts)
  76. shinkenno (12 Posts)
  77. FabianIB (1 Post)
  78. chickenwings (2 Posts)
  79. frrogoy (5 Posts)
  80. scusyxx (1 Post)
  81. extjsuser2010 (1 Post)
  82. karlsnyder0 (1 Post)
  83. a06mikkl (3 Posts)
  84. ptmll (1 Post)
  85. cdt3pm (1 Post)
  86. scaron (1 Post)
  87. ankurkaps (1 Post)
  88. guyza (1 Post)
  89. DeDarling (3 Posts)
  90. EduardoIbarra (1 Post)
  91. kinestetic (1 Post)
  92. surendrankn (2 Posts)
  93. mr.zaur (3 Posts)
  94. aparker (1 Post)
  95. kkris1983 (1 Post)
  96. neerajbherwal (1 Post)
  97. Ankit.Desai (3 Posts)
  98. ing.amdangelo (1 Post)