jQuery Forum

Joe, the problem is that your code has a single variable "i". At any point
in time, when you reference that variable you will get the *current* value
of "i".
While the for loop is running, "i" gets each of the values you expect. But
when is your callback function called? Much later, *after* the loop has
finished running. At this point "i" has the last value it was given in the
loop, 150.
(Note that your loop does not run from 1 through 150, but 1 through 149. The
last time through the loop, the value is 149, and then when the value
reaches 150 the loop terminates - so "i" is 150 after that.)
Then why is the marker created at the correct location? Because the
searchAddress geocoding function calls the callback with "point" set
correctly. But "i" is your own variable, and there's only one copy of it for
the entire program.
The easiest way to fix this is usually to use a closure. You could code it
like this:
jQuery(function( $ ) {

var $map2 = $('#map2');

$map2.jmap({
mapCenter:[30.2687,-97.7452],
mapZoom: 13
});

for( i = 1; i < 150; i++ )
createMarker( i );

function createMarker( i ) {
$map2.jmap("searchAddress", { address :$('#address'+i).val() },
function(options,point) {
$map2.jmap("addMarker", {
pointLatLng: [point.y, point.x],
pointHTML: "<div style='width:200px;'>

This office is
located at:

<b>" + $('#address'+i).val() + "

</div>" ,
centerMap: false
});
});
}
}); // End of DOM Ready
The only real change to the code here is the addition of the createMarker()
function. This function is called each time through your loop, and each time
it's called it gets its *own* local variable, also named "i". (It isn't
significant that this name "i" is the same name as the "i" outside the
function - they are two different variables and could have different names.)
So, when the searchAddress callback is called, it's using the local "i"
inside that particular instance of the createMarker function, which will be
the value you expect.
I took the liberty of making a couple of unrelated changes to the code, just
to illustrate some recommended coding techniques - in particular, the use of
the $map2 variable instead of calling the jQuery function $('#map2') every
time through the loop. Any time you can move something outside a loop
instead of calling it repeatedly, it will help performance.
One thing I didn't fix is the hard coded value of 150 (or 149). You probably
don't want to just hard code this - what happens when you open another
office? :-)
HOWEVER...
All that said, there is a much worse problem with the code, one that we
can't fix here.
The Google client geocoder is limited to 15,000 queries per day per API key.
At 150 per visit, you are going to hit that limit as soon as your page is
visited (or reloaded) 100 times. Then you will be blocked from further
geocoding requests, typically for 24 hours.
Even before you hit the limit, geocoding 150 locations is going to take a
while.
There's no way to fix this in JavaScript. Instead, you need to geocode all
of your locations ahead of time, save them in a database or a file on your
server, and code those latitude/longitude points into your HTML/JavaScript.
This will eliminate all the need for geocoding on the client. Your map will
load *much* faster, and you won't have to worry about the geocoder API
limit.
-Mike

Mike,
You are the man! No seriously! I fully understood WHY the comment
bubble HTML was only using the last iteration's value, but I am no
expert with closures. The book jQuery in Action touches on it, but I
still haven't wrapped my head around its power. Thank you thank you
thank you so much. Your explanation is clear, concise and elegant. I
have tested it out and it works great
As far as the coding practices are concerned, I am aware of all of the
issues and whipped this together toward the end of the day yesterday
and was determined to get it to work today. Also, I am using a portal
solution that uses Velocity templates so the $ alias can't be used.
And having to deploy the "theme" just to test in the development
environment coerced me to use sloppy practices.
In regards to the amount of queries to Google, I FULLY agree with
storing these values on the server instead of the client doing the
heavy lifting. I need to SHOW this in order for it to get
accomplished, if you know what I mean.
Thanks again!
Joe

Glad to help, Joe.
I didn't mean to imply that your coding was sloppy! I'm just an inveterate
tweaker. :-) I understand fully about taking shortcuts to get a prototype
running. (Just don't reload your page more than 100 times in a day!)
You know, now that I think of it, it would be pretty easy to modify your
code to create a JavaScript object with all the geocoded data in it - and
then you can paste that object back into the source code and remove the
gecoding logic. This would make your demo load quite a bit faster.
Something like this...
Add this tag to your HTML:
<pre id="geocoded"></pre>
And run this (untested) JS code:
jQuery(function( $j ) {

var offices = ['null'], nOffices = 150, nDone = 0;
var $map2 = $j('#map2');

$map2.jmap({
mapCenter:[30.2687,-97.7452],
mapZoom: 13
});

for( i = 1; i <= nOffices; i++ )
geocodeOffice( i );

function geocodeOffice( i ) {
$map2.jmap( "searchAddress",
{ address :$j('#address'+i).val() },
function( options, point ) {
offices[i] =
' { address:"' + address +
'", lat:' + point.y +
', lng:' + point.x + '}';
if( ++nDone == nOffices )
$j('#geocoded').html(
'var geocodedOffices = [\n' +
offices.join(',\n') +
'];\n'
);
}
);
}

}); // End of DOM Ready
After all the offices are geocoded, the PRE should be filled in with JS
source code for the 'geocodedOffices' array.
Copy and paste that result into your JS source code, and now your production
code can be:
jQuery(function( $j ) {

var nOffices = 150;
var $map2 = $j('#map2');

$map2.jmap({
mapCenter:[30.2687,-97.7452],
mapZoom: 13
});

for( i = 1; i <= nOffices; i++ )
createMarker( i );

function createMarker( i ) {
var office = geocodedOffices[i];
$map2.jmap("addMarker", {
pointLatLng: [ office.lat, office.lng ],
pointHTML: "<div style='width:200px;'>

This office is located
at:

<b>" + office.address + "

</div>",
centerMap: false
});
}
}); // End of DOM Ready
Maybe not necessary for your demo, but this is a pretty good trick for
anyone who is using the client geocoder and wants to cache a particular set
of locations without having to do any server coding.
-Mike
> From: Joe
>
> Mike,
>
> You are the man! No seriously! I fully understood WHY the
> comment bubble HTML was only using the last iteration's
> value, but I am no expert with closures. The book jQuery in
> Action touches on it, but I still haven't wrapped my head
> around its power. Thank you thank you thank you so much.
> Your explanation is clear, concise and elegant. I have
> tested it out and it works great
>
>
> As far as the coding practices are concerned, I am aware of
> all of the issues and whipped this together toward the end of
> the day yesterday and was determined to get it to work today.
> Also, I am using a portal solution that uses Velocity
> templates so the $ alias can't be used.
> And having to deploy the "theme" just to test in the
> development environment coerced me to use sloppy practices.
>
> In regards to the amount of queries to Google, I FULLY agree
> with storing these values on the server instead of the client
> doing the heavy lifting. I need to SHOW this in order for it
> to get accomplished, if you know what I mean.
>
> Thanks again!
>
> Joe
>
> On Apr 26, 11:53 am, "Michael Geary" <M...@Geary.com>

Mike,
Works like a charm! Thanks. I'll let you know the final result when
I'm finished. Currently working on a full javascript-based radial
search...
Joe
www.subprint.com