title: Javascript setTimeout with google maps markers
body: <p>Ok, My page gets some markers from a database via JSON and places them on a google maps map. It works ok, but the problem is to show this markers one by one with a small lag, and not all at the same time. As the google maps API, im trying to use setTimeout() method... with no further success. ¿Is it incompatible with json response?</p>
  
  <p>Here it is the code:</p>
  
  <p>This function retrieve all markers data from the db and works fine.</p>
  
  <pre><code>function cargarsonidos(cuales)
  {      
   $.getJSON("automatizar1.php",{que:cuales},function(json)
          {
            marcadores(json);          
          });
  }
  </code></pre>
  
  <p>Response example:</p>
  
  <pre><code>[{"id_marcador":"2","lat_marcador":"42.9912","long_marcador":"-7.54505","titulo_marcador":"Example data","tipo_marcador":"Example data","nombre_mp3":"example.mp3","dia":"no","descripcion":"Example data","url_video":"NO","video":"NO"}]
  </code></pre>
  
  <p>And now the function who creates the markers, infowindows and places into map</p>
  
  <pre><code>var id="";
  function marcadores(json)
   {
  
            $.each(json,function(index,value)
            { 
  
          id ="a"+json[index].id_marcador;
                  var popid="pop"+json[index].id_marcador;
                  var lat=json[index].lat_marcador;
                  var long=json[index].long_marcador;
                  var titulo=json[index].titulo_marcador;
                  var icono=json[index].tipo_marcador;
                  var mp3=json[index].nombre_mp3;
                  var pagina=json[index].id_marcador;
                  var descripcion=json[index].descripcion;
                  var url_video=json[index].url_video;
                  var video=json[index].video;
  
          id = new google.maps.Marker(
                  {
  
                    position: new google.maps.LatLng (lat, long),
                    map: map,
                    title: titulo,
                    animation: google.maps.Animation.DROP,
                    icon: 'iconos/'+icono+'.png'
                  });
  </code></pre>
  
  <blockquote>
    <p>setTimeout(function(){markersArray.push(id);}, 200);</p>
  </blockquote>
  
  <pre><code>                if (video === 'SI')
                  {
                         popid = new google.maps.InfoWindow(
                    {
  
                         content:'&lt;h3&gt;'+titulo+'&lt;/h3&gt;&lt;br /&gt;&lt;iframe width="420" height="315" src="'+url_video+'"       frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;&lt;div id="cambiar"&gt;&lt;a href="paginas/contenido.php?sonido='+pagina+'" onMouseOver="mouse_in();" onMouseOut="mouse_out();"&gt;&lt;br /&gt;&lt;img src="imagenes/datos.png"&gt;&lt;/a&gt;&lt;/div&gt;'
  
                           });
                  }   
  
                  google.maps.event.addListener(id,'click', function(){popid.open(map,id);});     
  
            }); 
  }
  </code></pre>
  
  <p>Everything works fine, but there is no delay between each marker ¿why?</p>