google-maps - Googleマップの画像を地図上に表示されている間違った位置にドラッグする

Question

これがJSコードです。DRAGGABLEとDRAGGABLE2という2つの異なる画像を地図上にマーカーとして配置します。マップはkmlファイルをロードします。

 <script type="text/javascript">
$(document).ready(function() {
$("#draggable").draggable({helper: 'clone',
stop: function(e) {
    var point=new google.maps.Point(e.pageX -27,e.pageY -106);
    var ll= overlay.getProjection().fromContainerPixelToLatLng(point);
    placeMarker(ll, 'alert.png');
    }
});

$("#draggable2").draggable({helper: 'clone',
stop: function(e) {
    var point=new google.maps.Point(e.pageX - 27,e.pageY -106);
    var ll=overlay.getProjection().fromContainerPixelToLatLng(point);
    placeMarker(ll, 'facebook.png');
    }
});
});
</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
var map;
var overlay;
var markers = {};
function initialize() {

  var myOptions = {
    zoom: 3,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        var ctaLayer = new google.maps.KmlLayer('test.kml');
    ctaLayer.setMap(map);

  overlay = new google.maps.OverlayView();
  overlay.draw = function() {};
  overlay.setMap(map);
}

function placeMarker(location,imgdrag) {
  var currentMrkMap; 
  currentMrkMap = parseInt(document.getElementById('mrkadd').value);
  currentMrkMap += 1;
  document.getElementById('mrkadd').value = currentMrkMap;
  document.getElementById('mrkelements').innerHTML += 'TestCodeHtmlIntoDIV';


  var marker = new google.maps.Marker({
        id: 'marker_' + currentMrkMap, 
        position: location, 
        draggable: true,
        map: map,
        icon:'img/'+imgdrag

  });
  id = 'marker_' + currentMrkMap;
  markers[id] = marker;

  var infowindow = new google.maps.InfoWindow({
        content: 'Add element <br><textarea id="txtAr" name="txtAr" rows="5" ></textarea><br>'
  });
  infowindow.open(map,marker);

  google.maps.event.addListener(marker,'click',function() {
      var coords = this.getPosition();
      var infowindow = new google.maps.InfoWindow({
        content: 'Add element <br><textarea id="txtAr" name="txtAr" rows="5" >' +  coords +'</textarea><br>'
      });
      infowindow.open(map,marker);
  });

  google.maps.event.addListener(marker, "dragend", function() {
      var coordinates = document.getElementById("txtAr");
      var coords = this.getPosition();
      coordinates.value= coords.lat() + ' '+ coords.lng();

  });

}
</script>

Cssコード。ボディとサイドバーはブートストラップからのものです。

<style type="text/css"> 
  body {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .sidebar-nav {
    padding: 9px 0;
  }
  #map_canvas {         
    width: 100%;
    height: 530px;  
  }
</style>

また、HTMLコードはBootstrapに基づいています。私たちの地図の部分はこんな感じです

<div class="span9"> 
    <div class="hero-unit">             
        <div id="map_canvas"></div>            
     </div>           
</div><!--/span-->