API Google Maps: itinéraire résultat ne montre pas

Question

Je crée ma propre carte en utilisant l'API Google Styled JS carte. Je voulais ajouter des fonctionnalités à la carte directions, je suivais le tutoriel officiel (Sous Affichage du DirectionsResult titre), mais le tracé final n'apparaît pas ...

Je débogués mon code et j'ai trouvé, que directionsService.route fonction retourne google.maps.DirectionsStatus.OK et directionsDisplay.setDirections (résultat) est vraiment appelé sans erreur JS ... donc, les directions sont calculées avec succès mais pas montré dans ma carte. A essayé de désactiver le style de carte spéciale, mais même sur le style de carte par défaut, il n'apparaît pas. Toutes les idées où le problème pourrait être?

OK, un 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

Je ne sais pas si elle est la source de vos problèmes, mais il vaut la peine de vous un coup ... A partir de votre entrée de script

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

Je suppose que la fonction est appelée après directions_init script api a été téléchargé, ce qui est probablement avant l'événement onload de la page, donc votre objet carte n'a pas été initié et est nul. Donc, vous appelez pratiquement

directionsDisplay.setMap(null);

Essayez d'appeler directions_init de gmap_init ou tout événement qui est déclenché après onload.