Global array scope issue in Javascript

Question

I'm currently working with a page that will eventually plot a series of markers (their data coming from a JSON object) onto a Google Map.

I can't seem to configure out a way of keeping the markers array filled. As outside the scope of the getJSON call, the array is empty.

   var markers = [];
   var map;
   var mapOptions = {
            center: new google.maps.LatLng(0.0, 0.0),
            zoom: 10,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          }
   map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

   $.getJSON("Home/GetLocations", function (data) {
       for (index in data) addMarker(data[index]);

       function addMarker(_data) {
           var marker = new google.maps.Marker({
               position: new google.maps.LatLng(_data.lat, _data.lng),
               map: map,
               title: _data.name
           });
           markers.push(marker);

       }
       //markers = 3 at this point.
   });
   // markers = 0 at this point.

The reason i need the array to still be filled, is that i intend to create a hyperlink of each marker on the page, so that it can be clicked on and the map zooms to the correct marker. Ideally this would be a hyperlink with a javascript function call, this javascript function would be passed the selected hyperlink's marker index as a parameter, allowing me to go e.g

function zoomIn(selectedIndex) {
            map.setCenter(markers[selectedIndex].getPosition());
          }

But at this point, the markers array is blank, so no longer holds each marker.

If anyone could point me in the right direction that would be great. Thanks

ryan0 · Accepted Answer · 2012-09-15 16:32:26Z

5

The function specified in the getJSON call will be called when getJSON completes, which is not necessarily when the code using the markers array will run. I think if you put the call to zoomIn (or whatever needs to use markers) inside the function specified in the getJSON call, markers will be filled when the time comes to use it. The key is that the markers array is being filled asynchronously, so you need to ensure the order in which your code executes.

If you are checking the markers array immediately following the getJSON call, don't. Check the markers array in the zoomIn function where it's being used.

edited Sep 15, 2012 at 16:32

answered Sep 15, 2012 at 15:19

ryan0

1,52217 silver badges23 bronze badges

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

7 Comments

davehale23 Over a year ago

ooooh, good point. I hadn't considered that OP was calling zoomIn before the array was populated.

norbert Over a year ago

Would the call to ZoomIn be accessible from a click event of a hyperlink, if it's inside the getJSON call, i thought it would have thrown a 'not defined' error?

Ian Over a year ago

@AndyGreen Why do you think it wouldn't be defined?

norbert Over a year ago

I've added function zoomIn(selectedIndex){ alert('hello'); }; inside the getJSON call but get 'Microsoft JScript runtime error: 'zoomIn' is undefined' when i click on a <li> with onclick="zoomIn(index);"

ryan0 Over a year ago

in other words, i think the only thing preventing your original design from working is a misplaced statement checking the markers array...

|

davehale23 · Accepted Answer · 2012-09-15 15:17:50Z

Is all this code in the same scope? You will need to have this var markers = []; in a global scope in order to have it accessible from all functions.

So do something like this:

var markers = [];
var map;
var mapOptions = {
        center: new google.maps.LatLng(0.0, 0.0),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
function init(){
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

   $.getJSON("Home/GetLocations", function (data) {
   for (index in data) addMarker(data[index]);

   function addMarker(_data) {
       var marker = new google.maps.Marker({
           position: new google.maps.LatLng(_data.lat, _data.lng),
           map: map,
           title: _data.name
       });
       markers.push(marker);

   }    
   });
}

function zoomIn(selectedIndex) {
        map.setCenter(markers[selectedIndex].getPosition());
      }

Then the array markers will be available at a global scope.

Collectives™ on Stack Overflow

Global array scope issue in Javascript

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related