przeciągnij znacznik poza mapą do elementu html

Question

Czy istnieje prosty sposób przeciągnięcia znacznika mapy google poza obszar mapy na inny element html dom. Próbowałem wielu rzeczy i wygląda na to, że jedynym sposobem jest zhackowanie i utworzenie duplikatu znacznika w jquery i po prostu umieszczenie wskaźnika myszy nad bieżącym znacznikiem, więc wydaje się, że został on przeciągnięty z mapy.

wszelkie sugestie mile widziane!

Przykład Fiddle: http://jsfiddle.net/y3YTS/26/

want to drag the marker onto the red box

Answer 1

Pewnie już tego dokonał, ale na wszelki wypadek ktoś szuka tutaj jest good starting place. To demo pobiera znacznik poza mapą i pozwala go upuścić na mapę. Chcesz zrobić odwrotność, ale koncepcja jest taka sama. Uzyskaj lokalizację myszy na mouseUp zdarzenia, a następnie zastąpić mapę znacznika ze znacznika html w tym miejscu

Answer 2

Oto rozwiązanie z siekać 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!"); 
      } 
     }); 
    } 
});