Javascript variable scope issues
<p>I'm creating a list of markers for a map, which - when they are dragged onto the map (via jquery draggable) - the image is replaced with a map marker.</p>

<p>The problem I am having, is that when creating my marker controllers - they each have a specific type - extracted from a list. As I iterate through the list, each dragable element gets given its 'stop' function, which uses the variable 'type'... now when each element is dragged on - they all act as though they are the 'type' of the last element, rather than their own.</p>

<p>Can anyone suggest how I might restructure this so that each marker maintains its specific type?</p>

<pre><code>var createMarkerControl = function(){       
   var markerTypes = ['custom', 'exit', 'food', 'medical', 'shelter', 'video'];
   var control = document.createElement('div');
   control.setAttribute('id', 'markerInput');

    for (var i = 0; i &lt; markerTypes.length; i++){
       var image = document.createElement('img');
       image.setAttribute('id', 'draggable-' + markerTypes[i]);
       image.setAttribute('src', 'images/gui/' + markerTypes[i] + '.png');
       image.style.width = '30px';

       //Set type
       var type = markerTypes[i];

       //Make elements dragable/dropable                
       control.appendChild(image);

       $(image).draggable({
          helper: 'clone',
          stop: function(e){
             //Add marker to map
             var point = new google.maps.Point(e.pageX, e.pageY);
             customMap.addPlacemark(point, type);
          },
          cursorAt: {left: 15, top: 0}
       });


    }

    map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(control);
}
</code></pre>
