マップの外側のマーカーをhtml要素にドラッグ

Question

マップ領域外のGoogleマップマーカーを別のhtml dom要素にドラッグする簡単な方法はありますか？私は物事を試して、唯一の方法は、jqueryで重複したマーカーをハックして作成し、現在のマーカー上にマウスを置いて地図からドラッグしたように見えるように見えます。

お気軽にお問い合わせください！

例フィドル：http://jsfiddle.net/y3YTS/26/

want to drag the marker onto the red box

Answer 1

あなたはおそらくすでにこれを達成しましたが、念のために他の誰かが見ている、ここでgood starting placeです。このデモでは地図上のマーカーを取り、地図上にドロップすることができます。あなたは逆をしたいが、コンセプトは同じです。 mouseupイベントにマウス位置を取得し、そのスポットここ

Answer 2

のHTMLマーカーとマーカーのマップを置き換えることはあなたのハックとソリューションです http://jsfiddle.net/H4Rp2/38/

var someData = [ 
    { 
     'name': 'Australia', 
     'location': [-25.274398, 133.775136] 
    }, 
    { 
     'name': 'La Svizra', 
     'location': [46.818188, 8.227512] 
    }, 
    { 
     'name': 'España', 
     'location': [40.463667, -3.74922] 
    }, 
    { 
     'name': 'France', 
     'location': [46.227638, 2.213749] 
    }, 
    { 
     'name': 'Ireland', 
     'location': [53.41291, -8.24389] 
    }, 
    { 
     'name': 'Italia', 
     'location': [41.87194, 12.56738] 
    }, 
    { 
     'name': 'United Kingdom', 
     'location': [55.378051, -3.435973] 
    }, 
    { 
     'name': 'United States of America', 
     'location': [37.09024, -95.712891] 
    }, 
    { 
     'name': 'Singapore', 
     'location': [1.352083, 103.819836] 
    } 
]; 















var gDrag = { 
    jq: {}, 
    item: {}, 
    status: 0, 
    y: 0, 
    x: 0 
} 


$(function(){ 

/*Google map*/ 
var mapCenter = new google.maps.LatLng(51.9226672, 4.500363500000049); 
var map = new google.maps.Map(
    document.getElementById('map'), 
    { 
     zoom: 4, 
     draggable: true, 
     center: mapCenter 
    } 
);  



    if(someData){ 

     gDrag.jq = $('#gmarker'); 

     /*LOOP DATA ADN CREATE MARKERS*/ 
     var markers = []; 
     for(var i = 0; i < someData.length; i++){ 

      markers.push(
       new google.maps.Marker({ 
        map: map, 
        draggable: false, 
        raiseOnDrag: false, 
        title: someData[i].name, 
        icon: 'http://icons.iconarchive.com/icons/aha-soft/standard-city/48/city-icon.png', 
        position: new google.maps.LatLng(someData[i].location[0], someData[i].location[1]), 

       }) 
      ); 

      //Block mouse with our invisible gmarker 
      google.maps.event.addListener(markers[i], 'mouseover', function(e){ 

       if(!gDrag.jq.hasClass('ui-draggable-dragging')){ 

        gDrag.item = this; 
        gDrag.jq.offset({ 
         top: gDrag.y - 10, 
         left: gDrag.x - 10 
        }); 


       } 
      }); 


     } 


     gDrag.jq.draggable({ 
      start: function(event, ui){ 
       console.log(gDrag.item.getIcon()) 
       gDrag.jq.html('<img src="'+gDrag.item.getIcon()+'" />'); 
       gDrag.item.setVisible(false); 
      }, 

      stop: function(event, ui){ 

       gDrag.jq.html(''); 

       /*Chech if targed was droped in our dropable area*/ 
       if(gDrag.status){ 
        gDrag.item.setVisible(false); 
       }else{ 
        gDrag.item.setVisible(true); 
       } 
      } 
     }); 

     $(document).mousemove(function(event){ 
      gDrag.x = event.pageX; 
      gDrag.y = event.pageY; 
     }); 



     $("#dropzone").droppable({ 
      accept: "#gmarker", 
      activeClass: "drophere", 
      hoverClass: "dropaccept", 
      drop: function(event, ui, item){ 
       gDrag.status = 1; 
       $(this).addClass("ui-state-highlight").html("Dropped!"); 
      } 
     }); 
    } 
});