marcador de arrastre fuera del mapa al elemento html

Question

¿Hay alguna manera fácil de arrastrar un marcador de google maps fuera del área del mapa a otro elemento html dom? He intentado un montón de cosas y parece que la única manera es atravesar y crear un marcador duplicado en jquery y simplemente tenerlo sobre el marcador actual para que parezca que lo has arrastrado fuera del mapa.

cualquier sugerencia bienvenida!

Ejemplo violín: http://jsfiddle.net/y3YTS/26/

want to drag the marker onto the red box

Answer 1

probablemente ya has logrado esto, pero sólo en caso de que otra persona está buscando, aquí hay una good starting place. Esta demostración toma un marcador que está fuera de un mapa y le permite soltarlo en el mapa. Quieres hacer lo contrario, pero el concepto es el mismo. Obtener la ubicación del ratón en mouseup evento y luego vuelva a colocar el mapa del marcador con un marcador html en ese lugar

Answer 2

Aquí está la solución con su truco 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!"); 
      } 
     }); 
    } 
});