Googleマップの方向サービスが表示されません

Question

私は、ある方向の方向を示すために次のコードを使用しています。私はこの投稿http://stackoverflow.com/questions/5959788/google-maps-api-v3-how-show-the-direction-from-a-point-a-to-point-b-blue-lineによって提供されたコードをuser @ user2314737に従っています。

私の知るところでは、コードを少し変更しました。しかし、その指示は私の地図には表示されません。私は間違って何をしていますか？

ここにコードがあります。

 <script> 
     function initialize(){ 
      var latlng = new google.maps.LatLng(6.242635,80.051840); //latitude and longitude respectively, pointA 
      var pointB = new google.maps.LatLng(6.237038,80.054709); 

      var contentString = '<h1> Volunteer House </h1>'+ 
       '<p>Many people also refer to this home as <b>VH</b>. This is a must see place in the city.'+ 
        '<br><br>Direction - Pass the <i>balangoda Children Park</i> and head along the <i>K Road</i>. '+ 
        'Turn to left at the second turn and walk just 25m.</p>'+ 
        '<br>Address - K Road, balangoda, Sri Lanka'+ 
        '<br>Website: Volunteer House, <a href="http://r.comlu.com" target="_blank">'+ 
        'http://r.comlu.com</a>'; 

      var infowindow = new google.maps.InfoWindow({ 
       content: contentString 
      });    

      var mapProp = { 
       center:latlng, //or you can pointB 
       zoom:15, //4 - displays in world map zoom 
       mapTypeId:google.maps.MapTypeId.ROADMAP 
      }; 
      var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 


      //------------------------------ Multiple markers using loops 
      var places = [ 
       ['balangoda Children Park', 6.241713, 80.052307, 2], //2 is the zIndex - order in which these markers should display on top of each other 
       ['My Home', 6.242693, 80.051855, 1] 
      ]; 

      var images = ['children.ico', 'office2.ico']; 


      var myMarker = new Array(); //store marker in array 

      for(var i=0; i<places.length; i++){ 
        var place = places[i]; 
        myMarker[i] = new google.maps.Marker({ 
          position: {lat: place[1], lng:place[2]}, 
          map: map, 
          title: place[0], 
          icon: images[i],         
          zIndex: place[3] 
        }); 

        if(i == 1){ 
          myMarker[1].setAnimation(google.maps.Animation.BOUNCE); 

          myMarker[1].addListener('click', function(){ 
           infowindow.open(map, myMarker[1]); 
          }) 
        } 
      }; 

      //--------------------------------------------------------------------- 

      /*------------------------------ show direction from point A to B using Google Maps API Direction Service 
       DirectionService - object to send and receive direction requests 
       DirectionRenderer - object to render the returned route on the map */ 

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

      //get route from A to B 
      calculateAndDisplayRoute(directiionsService, directionsDisplay, latlng, pointB); 

      //--------------------------------------------------------------------- 
     } 

     function calculateAndDisplayRoute(dS, dD, pA, pB){ 
       dS.route(
         { //1 
          origin: pA, 
          destination: pB, 
          travelMode: google.maps.TravelMode.DRIVING 
         },//1 
         function(response, status){ //2 
          if(status==google.maps.DirectionsStatus.OK){ 
           dD.setDirections(response); 
          } 
          else{ 
           window.alert('Directions request failed due to ' + status); 
          } 
         } //2 
       ); 
     } 


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

    </script> 

Answer 1

あなたは間違いがdirectionsServiceあるとdirectiionsServiceいない

calculateAndDisplayRoute(directionsService, directionsDisplay, latlng, pointB); 

ブラウザコンソール番目のページをロードすると