jQuery draggable , how to move the draggable object to correct position even though I pan or zoom my image

Question

I would like to do something like a google map , when someone drag the coordinates inside the google map, no matter the user zoom in or out the coordinates that the user drag will stay at same position , when I try to do this , after I drag my coordinates, and I zoom or pan the image , the coordinates doesn't move to the location where it supposed to be.

Is there any jquery or javascript can achieved that ??

jsFiddle

Thanks in advance for any advice ~~

$( function() {
  $( "#draggable" ).draggable();
} );