javascript object returns length 0 even when object is not empty

Question

I am trying to add multiple markers to google map.

My code :

function createMarkers(myArray) {
       var myOptions = {
        zoom:6,
        center: new google.maps.LatLng(28.704059, 77.102490)
      };

      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
      //shows the object in console with length of 3
      console.log(myArray);

      //but here length return is 0 so no Entry on FOR Loop
      console.log(myArray.length);


    for(var x=0;x<myArray.length;x++){

      var marker = new google.maps.Marker({
          position: myArray[i],
          map: map,
          title: 'Hello World!'
        });
    }

}

function initialize(){
    var geocoder = new google.maps.Geocoder();
    var cityArray   =   ['Agra','Delhi','Varanasi'];

      var myLatLng =    [];

     for(var i=0;i<cityArray.length;i++){

      geocoder.geocode({
        'address': cityArray[i]+', India'
      }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          var Lat = results[0].geometry.location.lat();
          var Lng = results[0].geometry.location.lng();
          myLatLng.push({'lat': Lat, 'lng': Lng});


        } else {
          alert("Something got wrong " + status);
        }
    });
    }

  //console.log(myLatLng);
  createMarkers(myLatLng);
}

google.maps.event.addDomListener(window, "load", initialize);

<style>
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
</style>

<div id="map_canvas"></div>

I got latitute and logitude in array of objects. Now i want to iterate over this in the createMarkers(myLatLng) function. But in this function i am able to log this object to console and showing length of 3 . But when want to get its length for looping it always return 0;

When you execute createMarkers(myLatLng); , the array is not populated. It's an asynchronous operation, the array is filled when the *callbacks* of the geocode() method are executed. — Pac0, Apr 23 '18 at 11:21

score -1 · Accepted Answer · answered Apr 23 '18 at 11:43

As stated in the comments, your problem is with async callback.

when JS preforms "async" actions (like jQuery ajax and geocoder.geocode) the action takes some time but the code below this request is executed without waiting.

that's why geocoder.geocode has that function inside it that checks if it was successful, this one:

   function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var Lat = results[0].geometry.location.lat();
      var Lng = results[0].geometry.location.lng();
      myLatLng.push({'lat': Lat, 'lng': Lng});

      createMarkers(myLatLng); // THIS IS A NEW LINE

    } else {
      alert("Something got wrong " + status);
    }

that only executes after your call was completed. just pass createMarkers(myLatLng); inside that callback function and it should work as planned.

thank you mystery downvoter! any special reason? was my answer not correct? did I not link to resource? was it not helpful and explanatory? teach me so I can do better in your eyes in the future — Jameson the dog, Apr 23 '18 at 12:24

javascript object returns length 0 even when object is not empty

1 Answers1