How to drag a created marker in google map api to specific position?

Question

On my website I have integrated the google maps api and set a marker but would now like to implement the ability to drag the marker to a more specific/exact position.

I have copied my code below for you all to see, map functions correctly, but can't drag the cursor.

Tried adding it to jsfiddle, but not sure how to use it http://jsfiddle.net/TJ94t/

Help always appreciated.

//<![CDATA[
/*************************************************
 * Created with GoogleMapAPI3.0beta
 * Author: Brad Wedell <brad AT mycnl DOT com>
 * Link http://code.google.com/p/phpgooglemapapiv3/
 * Copyright 2010 Brad Wedell
 * Original Author: Monte Ohrt <monte AT ohrt DOT com>
 * Original Copyright 2005-2006 New Digital Group
 * Originial Link http://www.phpinsider.com/php/code/GoogleMapAPI/
 *************************************************/

                var markersmap  = [];

                    var sidebar_htmlmap  = '';
                    var marker_htmlmap  = [];

                var to_htmlsmap  = [];
                var from_htmlsmap  = [];
            var mapmap = null;
function onLoadmap() {
var mapObjmap = document.getElementById("map");
if (mapObjmap != 'undefined' && mapObjmap != null) {

                var mapOptionsmap = {
                    zoom: 16,
                    mapTypeId: google.maps.MapTypeId.HYBRID,
                    mapTypeControl: true,
                    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DEFAULT}
                };

                    mapOptionsmap.center = new google.maps.LatLng(
                        36.488804,
                        -4.998799
                    );

                mapmap = new google.maps.Map(mapObjmap,mapOptionsmap);
            var point = new google.maps.LatLng(36.4888036,-4.9987986);
markersmap.push(createMarker(mapmap, point,"Marker Title","Marker Description", '', '', "sidebar_map", '' ));


              }
}

           function createMarker(map, point, title, html, icon, icon_shadow, sidebar_id, openers){
                var marker_options = {
                    position: point,
                    map: map,
                    title: title};  
                if(icon!=''){marker_options.icon = icon;}
                if(icon_shadow!=''){marker_options.icon_shadow = icon_shadow;}
                //create marker
                var new_marker = new google.maps.Marker(marker_options);
                if(html!=''){

                    var infowindow = new google.maps.InfoWindow({content: html});
                    google.maps.event.addListener(new_marker, 'click', function() {
                      infowindow.open(map,new_marker);
                    });
                    if(openers != ''&&!isEmpty(openers)){
                       for(var i in openers){
                         var opener = document.getElementById(openers[i]);
                         opener.onclick = function(){infowindow.open(map,new_marker); return false};
                       }
                    }

                    if(sidebar_id != ''){
                        var sidebar = document.getElementById(sidebar_id);
                        if(sidebar!=null && sidebar!=undefined && title!=null && title!=''){
                            var newlink = document.createElement('a');

                            newlink.onclick=function(){infowindow.open(map,new_marker); return false};

                            newlink.innerHTML = title;
                            sidebar.appendChild(newlink);
                        }
                    }
                }
                return new_marker;  
            }
        function isArray(a) {return isObject(a) && a.constructor == Array;}
function isObject(a) {return (a && typeof a == 'object') || isFunction(a);}
function isFunction(a) {return typeof a == 'function';}
function isEmpty(obj) { for(var i in obj) { return false; } return true; }
//]]>
</script>
<!--Google map-->

Answer 1

Add the draggable property when creating your marker_options and set its value to true.

var marker_options = {position: point, map: map, title: title, draggable: true};

More information about marker_options (as well as drag-events that can be subscribed to) is found in Google's Map Api documentation.