javascript scoping issue inside a function call

Question

I'm having a really hard time figuring out the scoping issue with the following script using the Google Maps API v3. I'm trying to geocode an unknown number of records (pulled from a database) and create a PolyLine from the results. There's some ruby sprinkled in the code, but it shouldn't be relevant to the JS right?

var trippath = new Array();

function drawHistoryPath(coordinates) {
var tripHistoryPath = new google.maps.Polyline({
    map: map,
    path: coordinates,
    strokeColor: "#6A0606",
    strokeOpacity: 1.0,
    strokeWeight: 5
});
}

<% @pins.each do |ps| %>
        geocoder.geocode( { 'address': '<%= escape_javascript(ps.location) %>'}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            trippath.push(results[0].geometry.location);
          } else {
            alert("Geocode was not successful finding <%= escape_javascript(ps.location) %> for the following reason: " + status);
          }
        });
<% end %>
drawHistoryPath(trippath);

When drawHistoryPath gets called, trippath doesn't exist, but I've confirmed that it is being populated correctly inside the geocoder function. Any idea why it's not honoring the global scope?

Answer 1

The geocode stuff is going to be asynchronous. When that call to drawHistoryPath(trippath) is reached, the first geocode request is probably many milliseconds from completion!

Set up a Javascript variable containing the count of "pins". Have your code inside the callback (to geocode) decrement that counter. When the counter is zero, you'll know it's time to call drawHistoryPath. You'll put that call inside the geocode callback function.

var pinCount = <% @pins.length %>; // making this up because I don't know Rails/Ruby/whatever

<% @pins.each do |ps| %>
    geocoder.geocode( { 'address': '<%= escape_javascript(ps.location) %>'}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        trippath.push(results[0].geometry.location);
        if (!--pinCount)
          drawHistoryPath(trippath);
      } else {
        alert("Geocode was not successful finding <%= escape_javascript(ps.location) %> for the following reason: " + status);
      }
    });
<% end %>