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 wele!

Example Fiddle: /

want to drag the marker onto the red box

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 wele!

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

want to drag the marker onto the red box

• javascript
• google-maps-api-3

• why im looking for the easy way :) – duante Commented Sep 14, 2011 at 23:36
• jajaja well that's because i'm thinking a easy way to acplish this but somehow you have two listeners, one for the div of the red box, and the second way, for the div map to know when the mouse i living this div and enter in the red box, but it's not easy, to make the validations, and implement the event handlers sounds hard at least for me – Jorge Commented Sep 14, 2011 at 23:41
• this is really close to being done... i posted a dependency question... check the fiddle I have almost pleted – duante Commented Sep 15, 2011 at 6:01

2 Answers 2

Here is solution with your hack http://jsfiddle/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./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 acplished 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