javascriptgoogle-mapsdriving-directionsmap-directions

Disable one of two draggable Markers in Google API DirectionsService


I'm using Google API Directions Service and i want to disable one of two markers in map. when i use render Options and set draggable to false both of markers set to false but i want disable one of markers to false not both of them.

function initialize() {
        var mapOptions = {
            zoom: 15,
            center: orgn
        };
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        directionsDisplay.setMap(map);
        google.maps.event.addListener(directionsDisplay, 'directions_changed', function () {
            computeTotalDistance(directionsDisplay.getDirections());
        });
        calcRoute();
        map.setZoom(15);
        map.setCenter(orgn);
    }

    function calcRoute() {
        var request = {
            origin: orgn,
            destination: 'دبیرستان شهدا، Ahvaz, Khuzestan, Iran',
            travelMode: google.maps.TravelMode.DRIVING
        };
        directionsService.route(request, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
        });
    }

    function computeTotalDistance(result) {
        var total = 0;
        var myroute = result.routes[0];
        for (var i = 0; i < myroute.legs.length; i++) {
            total += myroute.legs[i].distance.value;
        }
        total = total / 1000.0;
        document.getElementById('total').innerHTML = total + ' Km';
        $('#<%= tt.ClientID %>').val(total);
    }
    var orgn = new google.maps.LatLng(31.321173, 48.672320);
    var mapOptions = {
        zoom: 13,
        center: orgn
    };

    var rendererOptions = {
        draggable: true
    };
    var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
    var directionsService = new google.maps.DirectionsService();
    google.maps.event.addDomListener(window, 'load', initialize);

    $(document).ready(function () {
        $('#<%= SchoolDD.ClientID %>').bind('change', function () {
            $.ajax({
                url: "ajax.ashx?m=" + $(this).val(),
                success: function (result) {
                    if (result == '(0)') {
                        $('#std').hide();
                        $('#schoolpoint').fadeIn();
                    }
                    else {
                        orgn = result;
                        calcRoute();
                    }
                }
            });
        });

Solution

  • Look for draggable parameter. The parameter used for this.

    var marker = new google.maps.Marker({
        position: latlng,
        draggable:<this>, 
        map: map,
        shadow: iconShadow,
        icon: getMarkerImage(color),
        shape: iconShape,
        title: label,
        zIndex: Math.round(latlng.lat()*-100000)<<5
    });
    

    Working: http://www.geocodezip.com/v3_directions_custom_icons_draggableStart.html