drag marker outside map to html element

Question

Is there an easy way to drag a google maps marker outside the map area onto another html dom element. I have tried 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

Answer 1

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!");
            }
        });
    }
});