Q:

Why does this loop cause a stack overflow?

I decided to mess around with jquery and make a simple axonometric map based game. It renders some of the map, then has an issue with stack. (Maximum call stack size exceeded)
I am just using background colors for the tiles for now.
JS Bin Here
var map = [
  "g","g","g","s","s",
  "g","g","s","s","w",
  "g","g","s","w","w",
  "g","g","s","w","w",
  "g","g","s","w","w"
];
var x = 0;
var y = 0;
var count = 0;
var background;
function init() { $.each( map, function( key, value ) {

    x += 30;
    y += 60;
  if (count > 4){
    x -= 120;
    y -= 360;
    count = 0;
  }
    if (value == "g"){background = "#00ff00";}
    if (value == "w"){background = "#0000ff";}
    if (value == "s"){background = "#ffff00";}

    $('.map_piece').clone().appendTo('body').css({'top' : x + 'px', 'left' : y + 'px','display' : 'block','background' : background});
      count ++;
});
                }

$('document').ready(function(){
 init(); 

});

A:

In each iteration k, you clone 2^k items.
Instead of cloning an element, it might just be easier to create a new element each time:
$('<div class="map_piece">')
    .appendTo('body')
    .css({'top' : x + 'px', 'left' : y + 'px','display' : 'block','background' : background});

A:

Calling $('.map_piece').clone() clones all pieces that have been created thus far. This causes exponential growth in the number of cloned elements every time the loop runs. To do what you're intending to do, limit the clone to just one element by using first().
$('.map_piece').first().clone().appendTo('body').css({'top' : x + 'px', 'left' : y + 'px','display' : 'block','background' : background});

