Enabling and Disabling Dragging Markers by Checkbo

Question

Can you please take a look at this Demo and let me know how I can make the markers Dragable when the check box is unchecked. Please be informed that all markers has their own associated checkbox it means that user can lock each marker which they want( Not all together). Initially all Markers are unchecked when they loaded to page . And finally I need to change the icon when the marker checked as lock.

  var contentString = ' -- Lock <input name="your_name" value="your_value" type="checkbox">';
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  var infowindow =  new google.maps.InfoWindow({ content: "" });
  var data = {
        "markers": [{
                "latitude": 11.606503,
                "longitude": 122.712637,
                "title": "Copenhagen"
            }, {
                "latitude": 11.585988,
                "longitude": 122.757084,
                "title": "Barcelona"
            }
        ]
    };
    locations.length = 0;
    for (p = 0; p < data.markers.length; p++) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(data.markers[p].latitude, data.markers[p].longitude),
            map: map,
            draggable: true,
            title: "marker " + p,
            id: p
        });

        bindMarker(marker);
        bindInfoWindow(marker, map, infowindow, data.markers[p].title);
    }

    function bindMarker(marker) {
        google.maps.event.addListener(marker, 'dragend', function () {
   marker.setIcon('https://www.google.com/mapfiles/marker_green.png');
        });
        google.maps.event.addListener(marker, 'click', function () {
        });
    }
    function bindInfoWindow(marker, map, infowindow, strDescription) {
google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(strDescription + contentString);
    infowindow.open(map, marker);
});
}
});

**

Update

  function bindMarkerDrag(marker){
        google.maps.event.addListener(checkbox, "click", function(){
            draggable: false
         //marker.setClickable(checkbox.checked);
      });
        }

then I add the

 bindMarkerDrag(marker);

inside the loop Here is a Demo but not working

Answer 1

As I said in my comment, you need to add checkbox.checked = !marker.getDraggable(); in your marker click event listener. Not in the checkbox event listener.

var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.checked = !marker.getDraggable();
checkbox.addEventListener('click', function () {
    marker.setDraggable(!this.checked);
});

1. Create the checbox
2. Check it or not if the marker is draggable or not
3. Manage the checkbox click event

Answer 2

Check this code!! I have updated buildInfoWindow function to meet your requirements.

var map;
var locations = [];
var contentString = "--";
var infowindows = [];

$(document).ready(function () {
    var latlng = new google.maps.LatLng(11.610707, 122.740089);
    var myOptions = {
        zoom: 12,
        center: latlng,
        disableDefaultUI: true,
        scaleControl: true,
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL
        },
        mapTypeControl: true,
        draggableCursor: 'move',
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  var data = {
        "markers": [{
                "latitude": 11.606503,
                "longitude": 122.712637,
                "title": "Copenhagen"
            }, {
                "latitude": 11.585988,
                "longitude": 122.757084,
                "title": "Barcelona"
            }
        ]
    };
    locations.length = 0;
    for (p = 0; p < data.markers.length; p++) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(data.markers[p].latitude, data.markers[p].longitude),
            map: map,
            draggable: true,
            title: "marker " + p,
            id: p
        });
        var infowindow =  new google.maps.InfoWindow({ content: "" });
        bindMarker(marker);
        bindInfoWindow(marker, map, infowindow, data.markers[p].title, p);
        bindMarkerDrag(marker);
    }

    function bindMarker(marker) {
        google.maps.event.addListener(marker, 'dragend', function () {
   marker.setIcon('https://www.google.com/mapfiles/marker_green.png');
        });
    }
    function bindMarkerDrag(marker){

    }


    function bindInfoWindow(marker, map, infowindow, strDescription, p) {
google.maps.event.addListenerOnce(marker, 'click', function() {
     var checkbox = document.createElement("input");
        checkbox.type = "checkbox";
        checkbox.addEventListener('click', function () {
        marker.setDraggable(!this.checked);
    });
        var div = document.createElement('div');
        div.innerHTML = strDescription + contentString + "<br /> Lock             drag:  &nbsp;";
        div.appendChild(checkbox);
    infowindow.setContent(div);
    infowindow.open(map, marker);
    infowindows[p]= infowindow;
});
   google.maps.event.addListener(marker, 'click', function() {
    infowindows[p].open(map, marker);
});
}

});

Answer 3

You could something like:

google.maps.event.addListener(marker, 'mouseover', function(e){
    marker.setDraggable(document.getElementById('checkbox').checked);
});

This will set the draggable property to false or true before you start dragging (if you put it on the dragstart event, you will have a slight delay.) Replace the id checkbox with the one you need.