using values of a javascript array outside of a function

Question

I have a forloop that has a call to a function inside of it. Within that function, I'm pushing values to an array called markers.

Is there a way to access the values of the markers array outside of the forloop?

Here's the code:

<script type="text/javascript"> 
    // arrays to hold copies of the markers and html used by the side_bar 
    // because the function closure trick doesnt work there 
    var map = null;
    geocoder = new google.maps.Geocoder();
    var side_bar_html = ""; 
    var icon = '';
    var markers = [];

    function codeAddress(this_address,index,callback) {
        geocoder.geocode( { 'address': this_address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                callback.call(window,index,results[0].geometry.location)
            } else {
                alert("Geocode was not successful for the following reason: " + status);
            }
        });
    }


    function initialize() {
        // create the map
        var myOptions = {
            zoom: 3,
            center: new google.maps.LatLng(46.90, -121.00),
            mapTypeControl: true,
            mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
            navigationControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        google.maps.event.addListener(map, 'click', function() {
            infowindow.close();
        });


        for (var i = 0; i < businesses.length; i++) {
            codeAddress(businesses[i].address,i,function(i,point){
                var description = businesses[i].description;

                if(businesses[i].business_type == "Wine"){
                    //http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=A|00CC99|000000
                    icon = 'http://google-maps-icons.googlecode.com/files/wineyard.png';
                }else if(businesses[i].business_type == "Golf"){
                    icon = 'http://google-maps-icons.googlecode.com/files/golf.png';
                }else{
                    icon = 'http://google-maps-icons.googlecode.com/files/festival.png';
                }

                var marker = createMarker(point,businesses[i].name,description,icon);

                // put the assembled side_bar_html contents into the side_bar div
                document.getElementById("side_bar").innerHTML = side_bar_html;
            });//End codeAddress-function
        }//End for-loop

        console.log(markers);
        var markerCluster = new MarkerClusterer(map, markers);               

    }

    // A function to create the marker and set up the event window function 
    function createMarker(latlng, name, html,icon) {
        var contentString = html;
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            icon: icon,
            zIndex: Math.round(latlng.lat()*-100000)<<5
            });

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(contentString); 
            infowindow.open(map,marker);
        });

        // save the info we need to use later for the side_bar
        markers.push(marker);

        // add a line to the side_bar html
        side_bar_html += '<a href="javascript:myclick(' + (markers.length-1) + ')">' + name + '<\/a><br />'+html+'<br />';

    }

    var infowindow = new google.maps.InfoWindow({ 
        size: new google.maps.Size(150,50)
    });

    // This function picks up the click and opens the corresponding info window
    function myclick(i) {
        google.maps.event.trigger(markers[i], "click");
    }

</script>

As you can see, the last line says "var markerCluster = new MarkerClusterer(map, markers);" This is where I want to be able to access the information from.

Thanks!

Looks like you are missing a few lines of code to show the function and how the array is declared. — epascarello
– epascarello, Commented May 3, 2011 at 22:13

Matty F · Accepted Answer · 2011-05-03 23:15:45Z

1

The problem is you're not accounting for the asynchronous nature of the call to codeAddress. You're calling that function in a loop, which is triggering a series of calls to the Google Maps API.

You are running this line:

var markerCluster = new MarkerClusterer(map, markers);

...even before the callbacks have been triggered.

To fix, maintain a counter. Each time the callback is triggered increase that counter by 1. Once it is equal to businesses.length you know all the addresses have been geo-coded, and all markers have been added to the array. Now you can create the MarkerCluster.

answered May 3, 2011 at 23:15

Matty F

3,7934 gold badges33 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bigmike7801 Over a year ago

Your answer seems to make the most sense so far, however where is it that I would be putting the counter and where would I create MarkerCluster?

Amr Elgarhy · Accepted Answer · 2011-05-03 22:12:16Z

0

Yes, Declare it before the for loop.

var markers
for(....

answered May 3, 2011 at 22:12

Amr Elgarhy

69.2k70 gold badges193 silver badges311 bronze badges

1 Comment

bigmike7801 Over a year ago

I've tried this but it's as if the function within the forloop is clearing the markers array or something.

judda · Accepted Answer · 2011-05-03 22:15:56Z

0

Bring the definition of the marker outside of the for loop ...

var markers = new Array ();
for (var i = 0; i < businesses.length; i++) {
    markers[i] = ...

answered May 3, 2011 at 22:15

judda

3,9721 gold badge27 silver badges27 bronze badges

3 Comments

bigmike7801 Over a year ago

I try this but it's as f the function clears the array afterwards

bigmike7801 Over a year ago

The values of marker are being assigned to the markers array.

judda Over a year ago

You don't return the marker that was made from the createMarker function. Also, instead of var marker = createMarker ( ... ), --> marker [ i ] = createMarker ( ... )

Collectives™ on Stack Overflow

using values of a javascript array outside of a function

3 Answers 3

1 Comment

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related