1. #21
    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 REPLY: geocoding problem

    REPLY: geocoding problem


    Hi JFB,

    If you take look at the following method from the GMapPanel you can see how the Google Map API and the GMapPanel interact:

    Code:
    geoCodeLookup : function(addr) {
        this.geocoder = new GClientGeocoder();
        this.geocoder.getLocations(addr, this.addAddressToMap.createDelegate(this));    
    }
    The Geocoder is created to map an addres. However, you will have to create your own instance since this method calls the this.addAddressToMap method which assumes that you are setting the center of the map.

    In the response object that is returned from Google you can request the response code. The detailed response codes can be found here. http://code.google.com/apis/maps/doc...ocoding_Object The problems you have can stem from all kinds of sources the most common is either a detail level that is too low or an address that is misspelled. Hard to say without your code or some example of an address that causes problems .

    In the panel the markers that you add are 'processed' in the addmarker method of the Panel. This is the part I like least of the Panel since it makes it impossible to create the markers outside the panel and stay 'connected' with them once displayed. However from the code you can deduct that the Objects in the array need to have the following properties: lat, lng, marker, setCenter (is this marker the center of the map), listeners. Ignore the options object below since this was added by yours truly and this won't necessarily be added to the overall approach it only serves a purpose if you also change the way listeners are connected to the markers.

    Code:
    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
           );
       }
     }
    So to come back to the original point. Without some examples of addresses it is hard to answer your question.

    cheers,
    Aad
    --
    Aad Nales, java developer & Ext admirer

  2. #22
    Ext JS Premium Member Joyfulbob's Avatar
    Join Date
    Feb 2008
    Posts
    176
    Vote Rating
    1
    Joyfulbob is on a distinguished road

      0  

    Default


    Thanks for your reply! I understand that code; however, my markes are coming from a database that contains street addresses; not latitudes/longitudes. I'm confused over this - because the center point is an address yet the markers are lat/lng? Isn't that inconsistent? What database stores lat/lng? Why wouldn't the markers be street addresses instead of lat/lng?

    Anyway, I understand this function; but I've don't have lat/lng to pass in to addMaker. Here's what I've got:

    My panel code (lat, lng are placemarkers to hold the js values):
    PHP Code:
        markers: [{
                            
    streetAddr'9818 W HOWARD AVENUE, MILWAUKEE, WI 53228, USA',
                           
    lat0,
                           
    lng0,
                            
    title:  'Installer B',
                            
    mrkListeners: {
                                
    click: function(e){
                        
    Ext.Msg.alert('Installer B');
                                   }
                              }
                        } 

    my .js:
    Code:
        addMarkers: function(markers) {
            
            if (Ext.isArray(markers)){
                for (var i = 0; i < markers.length; i++) {
    		    // Convert to Lat Lng	
                             // These 4 fields are global vars to hold marker data from the page	    
    		markerMarkers = this.markers[i];
    		markerStreetAddr = this.markers[i].streetAddr;
    		markerTag = this.markers[i].title;
    		markerListeners = this.markers[i].mrkListeners;
    		
                    // Call a new FNC that gets lat/lng
                    this.geoCodeLookupLL(this.markers[i].streetAddr);
                }
            }
            
        }
    ...
        // BK..Convert street address to Lat/Long
        geoCodeLookupLL: function(addr) {
            
            this.geocoder = new GClientGeocoder();
    	this.markerStreetAddr = addr;
    	console.info( ' markerStreetAddr: ' + this.markerStreetAddr );
            this.geocoder.getLatLng(addr, 
    	
    		function(point) {
    		
    		if (!point) {
    		    Ext.MessageBox.alert('Invalid marker', 'Unable to Locate the Address you provided');
    		    console.info('Invalid addr: ' + addr + ' Point: ' + point );
    		}else{
    		    // var markerLL = this.getMarkerLatLng();
    		    // var mkr_point = new GLatLng(markerLL.lat,markerLL.lng);
    		    console.info('markerTag: ' + markerTag + ' Point: ' + point  + ' : ' + markerMarkers );
    		    // var mkr_point = new GLatLng(markerMarkers.lat, markerMarkers.lng);
    		    this.addMarker( point, markerTag, false, this.setCenter, markerListeners );
    		    // this.addMarker( point, this.markers[i].title, false, this.markers[i].setCenter, this.markers[i].mrkListeners );  // this line throws the error
    		}
    	   }
    	);
            
        },
    Function geoCodeLookupLL is where the problem is. I call getLatLng and it returns the point just fine, but then addMarker errors with ' not a function'. I know it's a socpe issue but can't firgure it out. addAddressToMap works fine when referring to this.setCenter.marker but my addMarker doesn't?

    Error:

    PHP Code:
    this.addMarker is not a function
    (
    no name)((42.966158, -88.029658xr=42.966158 Nb=-88.029658 x=-88.029658 y=42.966158)Ext.ux.GMapPanelL... (line 248)
    jq(Object)main.js (line 1433)
    iq(Object)main.js (line 1420)
    Cl(Object)main.js (line 890)
    [Break 
    on this errorthis.addMarkerpointmarkerTagfalsethis.setCentermarkerListeners )... 
    Thanks in advance!

  3. #23
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Well, you sloped off yesterday implying that you'd understood what I had carefully explained.

    But you didn't listen.

    The "this" reference for that callback function needs to be defined.

    Either that, or capture it into a variable which has the same scope as that function, and use that variable.

  4. #24
    Ext JS Premium Member Joyfulbob's Avatar
    Join Date
    Feb 2008
    Posts
    176
    Vote Rating
    1
    Joyfulbob is on a distinguished road

      0  

    Default


    Thanks, Animal. I did listen - for two hours at home last night! I just don't fully understand yet. I'm having trouble translating your principle/rule into the actual code as I learn this concept.

    By this
    Quote Originally Posted by Animal View Post
    The "this" reference for that callback function needs to be defined.
    are you saying that I have to define this.addMarker? Why? Isn't it already defined? addAddressToMarker calls it just fine - how is my call different? The only difference I can see is that I'm calling it from a nested fnc in geoCodeLookupLL.

    How do I define it? I had tried a new fnc but it didn't work:

    PHP Code:
      addMarkerToMap: function(point) {
            
        if (!
    point) {
            
    Ext.MessageBox.alert('Invalid marker''Unable to Locate the Address you provided');
            
    console.info('Invalid addr: ' markerStreetAddr ' Point: ' point );
        }else{
            
    // var markerLL = this.getMarkerLatLng();
            // var mkr_point = new GLatLng(markerLL.lat,markerLL.lng);
            
    console.info('addr: ' markerStreetAddr ' Point: ' point );
            var 
    mkr_point = new GLatLng(markerMarkers.latmarkerMarkers.lng);
            
    this.addMarkermkr_pointmarkerTagfalsemarkerMarkers.setCentermarkerListeners );
            
    // this.addMarker( point, this.markers[i].title, false, this.markers[i].setCenter, this.markers[i].mrkListeners );
        
    }
        }    
    //    eo addMarkerToMap 
    I also tried:

    Either that, or capture it into a variable which has the same scope as that function, and use that variable.
    via:...

    PHP Code:
        afterRender: function(){
            
            
        var 
    markerMarkers;
        var 
    markerStreetAddr;
        var 
    markerTag;
        var 
    markerListeners;
    ...
        
    addMarkers: function(markers) {
            
            if (
    Ext.isArray(markers)){
                for (var 
    0markers.lengthi++) {
                
    // BK..convert to Lat Lng            
            
    markerMarkers this.markers[i];
            
    markerStreetAddr this.markers[i].streetAddr;
            
    markerTag this.markers[i].title;
            
    markerListeners this.markers[i].mrkListeners;
            
                    
    this.geoCodeLookupLL(this.markers[i].streetAddr);
                   
    // var mkr_point = new GLatLng(markers[i].lat,markers[i].lng);
                   // this.addMarker(mkr_point,markers[i].title,false,markers[i].setCenter, markers[i].mrkListeners);
                
    }
            } 
    ...but that gave me errors as well.

    Thanks again!

  5. #25
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    You are just not reading what I write.

    Inside that callback function, With me so far?

    this will refer to the browser window. It has, as I explained NO WAY OF KNOWING WHAT TO SET IT TO.

    How can Google's function POSSIBLY know what to set "this" to?

    Capture "this" in a variable before you call the geocode, and then use that variable inthe callback instead of "this".

    You really, really, really, really need to learn Javascript before you get into complex UI stuf like GMAPs. If you do not know what you are doing you will just hit problems over and over and over again. And if people just give you solutions because you flap around in front of them, you'll continue not to learn.

  6. #26
    Ext JS Premium Member Joyfulbob's Avatar
    Join Date
    Feb 2008
    Posts
    176
    Vote Rating
    1
    Joyfulbob is on a distinguished road

      0  

    Default


    Thanks for your patience. You're right; I do need to learn it better. I'll digest what you gave me. I've just been going along learning as needed to get ExtJS apps done. I know that's not the best way. You're right; when I get to complex apps like this I need to know JS better.

    Thanks for your assistance! I do appreciate it! BTY, do you know of a good JS book/web site that deals with these topics in depth? I'd like to learn it in an orderly manner and not just as I need it (As I've been doing!).

    Thanks again!

  7. #27
    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 there are loads but this cover the some of the basics

    there are loads but this cover the some of the basics


    Hi JFB,

    This may get you started. An article that just covers scope

    http://www.digital-web.com/articles/...in_javascript/

    BTW: database with just coordinates are actually pretty handy, try doing calculations with addresses

    Have fun with the article,
    cheers,
    Aad
    --
    Aad Nales, java developer & Ext admirer

  8. #28
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    I've heard good things about Crockford's "Javascript: The Good Parts"

    And he has lots of info on his site: http://javascript.crockford.com/

    This is good http://developer.mozilla.org/en/Core..._with_Closures

  9. #29
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Where that article mentions bind() see http://extjs.com/deploy/dev/docs/?cl...createDelegate

  10. #30
    Ext JS Premium Member Joyfulbob's Avatar
    Join Date
    Feb 2008
    Posts
    176
    Vote Rating
    1
    Joyfulbob is on a distinguished road

      0  

    Default


    Thanks, guy!

    I had read the scope article before.

    So I had the afternoon off yesterday and went to my local Barnes and Noble and browsed some JS books. Guess which one I ended up buying? Crockford's "javascript: The Good Parts"! It's quite good and I'm learning and understanding things I've already coded - I've said to myself, "Aha! That's why I coded it that way!"

    So, Animal, I'm understanding better what you've been explaining to me. When I get back to this app, I'm sure I'll get it working. Thanks!

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)