CODEWITHSUNDEEP
javascriptgoogle-mapsmapsgoogle-api
bigmike7801
bigmike7801

Reputation: 3970

using values of a javascript array outside of a function

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!

Upvotes: 1

Views: 1744

Answers (3)

Matty F
Matty F

Reputation: 3783

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.

Upvotes: 1

judda
judda

Reputation: 3972

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] = ...

Upvotes: 0

Amr Elgarhy
Amr Elgarhy

Reputation: 68902

Yes, Declare it before the for loop.

var markers
for(....

Upvotes: 0

Related Questions