How can I drag a DOM object(image) (which is outside of ) into a map then create a marker there?

Question

Hi, I just want to add some kind of markers which are listed beside map, then user can drag them in to map. I tried to use GEvent.addDomListener(domObj, "drag",functName); but it didn't works. Is there any way to do that? Thanks Dau

Answer 1

I am not sure if you are using jQuery UI or not, but I would recommend using this library as it will streamline the process of creating the draggable DOM element and finding the position for the element.

This example relies on jQuery UI to find the Div Pixel coordinates of draggable element after it has been moved.

Using jQuery UI - we are going to do a couple of things:

• Make the Element Draggable
• Create an event listener for when the dragging of an element has stopped

• Pass the position of the element once the element has moved to another function called 'createMarker' where we will create our marker

   $("#dragMe").draggable({
       stop:function(event,ui){
            window.createMarker(ui.position);
       }
   });
  

Create Marker will be responsible for doing a few things:

• Receive the Left and Top position of our draggable element
• Calculate the equivalent GLatLng point for that point while taking the offset of our map into consideration

• Create the marker and add it to the map

          function createMarker(position)
          {
              //Adjust Offset
              var offset = {
                      left:10,
                      top:-5
              }
  
  
             //Create a new GPoint
             var myGPoint = new GPoint(
                 position.left+offset.left,
                 position.top+offset.top
             );
  
  
             //Calculate the LatLng for this point
             var myLatLng = map.fromDivPixelToLatLng(myGPoint);
  
  
             //Create the Marker and add it to the Map
             var marker = new GMarker(myLatLng);
             map.addOverlay(marker);
          }
  
  
  

I also created a working example of this code located here. Be sure and let me know if you have any other questions, I hope this helps!

:)