Google maps API: Directions result not showing

Question

I'm creating my own styled map using Google Maps JS API. I wanted to add directions functionality to map, i followed the official tutorial (Under Displaying the DirectionsResult title), but the final route is not appearing...

I debugged my code and I found, than directionsService.route function returns google.maps.DirectionsStatus.OK and directionsDisplay.setDirections(result) is really called with no JS error... So directions are successfully computed but not showed in my map. A tried to turn off special map styling but even on default map style it is not appearing. Any ideas where could the problem be?

OK, some code...:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAB2gbXmG... ...mNs66iPr8&amp;sensor=false&amp;callback=directions_init"></script>

    <script type="text/javascript">
        var map;
        var zoom = 11;
        var directionsDisplay;
        var directionsService;

        function gmap_init(){
            var styleArray = [ /*here is style but even if its commented its not working*/];

            var alterMapStyle = new google.maps.StyledMapType(styleArray, {name: "ALTER style"});


            var latlng = new google.maps.LatLng(/*lat, lng*/);
            var myOptions = {
              zoom: zoom,
              center: latlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              mapTypeControl: false,
              panControl: false,
              zoomControl: false,
              scaleControl: false,
              streetViewControl: false
            };
            map = new google.maps.Map(document.getElementById("gmap"), myOptions);

            map.mapTypes.set('ALTER_style', alterMapStyle);
            map.setMapTypeId('ALTER_style');


        }

        function directions_init(){

            directionsService = new google.maps.DirectionsService();
            directionsDisplay = new google.maps.DirectionsRenderer();
            directionsDisplay.setMap(map);

            display_route();

        }

        function display_route(){
            var request = {
                origin: 'Place A',
                destination:'Place B',
                travelMode: google.maps.TravelMode.DRIVING
              };

          directionsService.route(request, function(result, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                //program got here without error
                directionsDisplay.setDirections(result);
            }
          });

        }

Answer 1

Not sure if it's the source of your problems, but it's sure worth a shot... From your script input

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAB2gbXmG... ...mNs66iPr8&amp;sensor=false&amp;callback=directions_init"></script> 

I assume the directions_init function is called after api script has been downloaded, which probably is before page's onload event, thus your map object has not been initiated and is null. So practically you are calling

directionsDisplay.setMap(null);

Try calling directions_init from gmap_init or on any event that is triggered after onload.