title: Google Maps v3 -> Database/mysql -> AJAX -> LOOP -> AJAX -> Loop
body: <p>a) the real joke first:
  Finally buying Microsoft stuff over the years paid off..
  Trying to debug using Chrome, my map was showing just one marker. It was on the correct latlng for the period of the setTimeout, blinks for a small fraction of second, back to same position. 
  At a certain time, shot code to Explorer by mistake....... voila... code iterates through the database, but does not use the setTimeout for each marker. At Explorer, setTime out (Ex, 5 seconds), means all the markers will show up, with the right infowindow, but it's 5 seconds for all markers. The longer the time, the longer it will stay in one of them (alwyas the same one), going really fast on the other markers. At chrome, the iteration was so fast I could not see the iteration thru the other latlng's. It was just a blink. </p>
  
  <p>b) I guess the problem is that the getJson (or Ajax), using either for loop or $.each (I used all sorts of combinations.....) is combined with the other loop inside the function changeMarker. So there are two loops going on at the same time. However, I don't know how to fix it. If I close the Ajax (or getJson) right after the $.each or for loop, the rest of the code doesn't get the values. Nothing happens (just my alert, which is for debugging purposes). </p>
  
  <p>No, I don't fully understand closures. Yes, I read a bunch of stuff, the main one <a href="http://jibbering.com/faq/notes/closures/" rel="nofollow">here</a>, but also <a href="https://developers.google.com/maps/documentation/javascript/events" rel="nofollow">here</a> and <a href="http://www.svennerberg.com/2012/03/adding-multiple-markers-to-google-maps-from-json/" rel="nofollow">here</a> and <a href="https://developers.google.com/maps/documentation/javascript/examples/event-closure" rel="nofollow">there</a>. but still didn't figure it out to :/</p>
  
  <p>c) Not easy being a newbie, trying to solve a problem for days... and not getting it solved. </p>
  
  <p>Any help will be greatly appreciated!</p>
  
  <p>Here is the code - omitted a long section where map gets personal options. </p>
  
  <pre><code>var BERLIN = new google.maps.LatLng(-32.517683, -46.394393);
  var map = null;
  var marker = null;
  var index = 0;
  var infoWindow = null;
  var latlng ;
  var MY_MAPTYPE_ID = 'custom_style';
  
  
  function initialize() {
  
      //personal options not included here. 
  
      var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);
  
      map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
  
      $.getJSON('php/locationsJson.php',function(json){
          $.each( json, function(i, item) {
              var lat = this.lat;
              var lng = this.lng;
  
              var location  = new google.maps.LatLng(json[i].lat,json[i].lng);                    
  
              alert( json[i].lat +','+json[i].lng );
  
              function dropMarker (map, pos){
                  return new google.maps.Marker({
                      map: map,
                      position: location,
                      draggable: false,
                  }); // return
              }
  
              function changeMarker() {   
  
                  if (marker) {
                      infoWindow.close();
                      marker.setMap(null);
                  }
  
                  var pos = location[index];
                  marker = dropMarker(map,pos);
                  var contentString = ('lat: ' + location.lat() + '&lt;br /&gt;' + 'lng: ' + location.lng())
  
                  infoWindow.setContent(contentString);
  
                  setTimeout(function () {
                      infoWindow.open(map, marker);
                  }, 100);
  
                  index = (index + 1) % json.length;
  
                  setTimeout(function () {
                      changeMarker();
                  }, 4000);
              } 
  
              var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);
  
              infoWindow = new google.maps.InfoWindow()
  
              changeMarker(); 
          }); //$.each                
      }); //end of getjson   
  }  //end of initialized
  </code></pre>
  
  <p>Here is <a href="http://jsfiddle.net/Gloak/NMPRP/" rel="nofollow">fiddle</a>  (thanks for the help to get to that point) for the code BEFORE the AJAX. I tried to add the json file in the fiddle, but it's too complex to add json inside the fiddle. </p>
  
  <p>Thank you again for your time. </p>