Google Maps V3 setDirections() callback

Question

Is there a posibility to get a callback when setDirections() is executed?

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=<?=SYS_LANG;?>"></script>
<script type="text/javascript">
$(document).ready(function(){
    var destination = '<?=$_POST['address'];?>';
    var directionsDisplay = new google.maps.DirectionsRenderer({ draggable: true });
    var directionsService = new google.maps.DirectionsService();
    var geocoder;
    var infoWindowContent = '<div id="gmap_infowindow">infocontent</div>';
    var map;
    var marker;
    var position = new google.maps.LatLng(46.80193957664, 11.41754150390625);

    function calcRoute(start, end) {
        var request = {
            origin: start,
            destination: end,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) {
            if(status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
        });
    }
    function codeAddress(address) {
        if(geocoder) {
            geocoder.geocode({ 'address': address }, function(results, status) {
                if(status == google.maps.GeocoderStatus.OK) {
                    calcRoute(results[0].geometry.location, position);
                    document.getElementById('gmap_input').value = address;
                }
            });
        }
    }

    function initialize() {
        if(destination) geocoder = new google.maps.Geocoder();
        map = new google.maps.Map(document.getElementById('gmap_map'), {
            center: new google.maps.LatLng(46.80193957664, 11.41754150390625),
            zoom: 9,
            mapTypeId: google.maps.MapTypeId.TERRAIN
        });
        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById("gmap_directions"));

        var autocomplete = new google.maps.places.Autocomplete(document.getElementById('gmap_input'));
        autocomplete.bindTo('bounds', map);

        var infowindow = new google.maps.InfoWindow({ maxWidth: 240 });
        var marker = new google.maps.Marker({
            position: position, 
            map: map,
            title:"Title"
        });

        infowindow.setContent(infoWindowContent);
        infowindow.open(map, marker);

        if(destination) codeAddress(destination);

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map, marker);   
        });
        google.maps.event.addListener(autocomplete, 'place_changed', function() {
            var place = autocomplete.getPlace();
            if (place.geometry.viewport) {
                map.fitBounds(place.geometry.viewport);
            } else {
                map.setCenter(place.geometry.location);
            }
            calcRoute(place.geometry.location, position);
        });
        google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
            $('#article').mCustomScrollbar('vertical', 350, 'easeOutCirc', 1.05, 'auto', 'yes', 'no', false);
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);

    $('#gmap_map').css('height', '310px');
    $('#article form').submit(function(event){ event.preventDefault(); });
});
</script>

Solution

You can bind an EventListener for directions_changed to your directionsDisplay:

var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer({ 'map': map });

//...

var request = {
  origin     : ...,
  destination: ...,
  travelMode : google.maps.DirectionsTravelMode.WALKING
};

directionsService.route(request, function(response, status) {
  if (status == google.maps.DirectionsStatus.OK) {
    directionsDisplay.setDirections(response);
  }
});

// ...

google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
  // ... CALLBACK
});

Is that what you were after?

Comments

[DIDi]

This event is fired when the direction on the map is changed. I need the change of the directions panel. Which is set by "directionsDisplay.setPanel(element);".

[DIDi]

sry, the panel is defined by "directionsDisplay.setPanel(element);"

[polarblau]

Shouldn't they change at once?

[DIDi]

Maybe, my problem is, that i have to reload a jQuery Scroll plugin because of the directions panel. And this doesn't work with these events. I think that the event is fired before everything is loaded, so the Scroll plugin doesn't gets the new content height...

[DIDi]

checkt it again and it was the delay, don't know what i did wrong first with it...

[Ben Fransen]

Worked perfectly for me, was looking for a callback when directions were set because I wanted to the change preserve viewport option and timing was an issue in that regard. thanks, +1