drag marker outside map to html element

Is there an easy way to drag a google maps marker outside the map area onto another html dom element. I have t开发者_如何转开发ried allot of things and looks like the only way is to hack through and create a duplicate marker in jquery and just have it hover over the current marker so it appears you have dragged it off the map.

any suggestions welcome!

Example Fiddle: http://jsfiddle.net/y3YTS/26/

want to drag the marker onto the red box

Here is solution with your hack 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!");
            }
        });
    }
});

You've probably already accomplished this, but just in case someone else is looking, here is a good starting place. This demo takes a marker that is off a map and allows you to drop it on the map. You want to do the reverse, but the concept is the same. Get the mouse location on mouseup event and then replace the marker's map with an html marker in that spot