Uncaught TypeError：プロパティ 'route'を読み取ることができません

Google Maps APIを使用して、 'whereNew.js'の緯度と経度に基づいて点をプロットするマップを作成しました。そのマーカーの色は ' MarketData.js '。マーカーがクリックされると、「ルートの表示」ボタンと「MarketData.js」に基づく情報が表示されたインフォウィンドウが表示されます。この時点までにコードは正常に実行されました。Uncaught TypeError：プロパティ 'route'を読み取ることができません

これ以降、任意のマーカーの[ルートを表示]ボタンをクリックすると、Google Maps APIに「MarketData.js」の8番目の列のすべての場所からそのマーカーまでのすべてのルートが表示されます。 Iそのボタンをクリックして、それがこのエラーを与えている：

Uncaught TypeError: Cannot read property 'route' of undefined at calculateAndDisplayRoute

whereNewTest1.html:162

私は私が間違ってやっているのか理解していない

whereNewTest1.html

<html> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>Markets of Kolkata</title> 
    <style> 
    #map { 
     height: 100%; 
    } 
    /* Optional: Makes the sample page fill the window. */ 

    html, 
    body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
    } 

    #floating-panel { 
     position: absolute; 
     top: 10px; 
     left: 25%; 
     z-index: 5; 
     background-color: #fff; 
     padding: 5px; 
     border: 1px solid #999; 
     text-align: center; 
     font-family: 'Roboto', 'sans-serif'; 
     line-height: 30px; 
     padding-left: 10px; 
    } 

    #warnings-panel { 
     width: 100%; 
     height: 10%; 
     text-align: center; 
    } 
    </style> 
    <link href="http://google-developers.appspot.com/maps/documentation/javascript/examples/default.css" rel="stylesheet"> 

    <!-- If you are in China, you may need to use theis site for the Google Maps code 
    <script src="http://maps.google.cn/maps/api/js" type="text/javascript"></script> --> 
    <!--<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> --> 
    <!-- <script async defer src= 
     "https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing&key=AIzaSyDrdSH53E0MRIfajUGZQiFHAB0aLfzFIVU&v=3&v=3&callback=displayDirections"></script> 
    </script> --> 
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBbXta5ppMyzPmTCGNsyP-djMlSOGJ9t9o&callback=initialize"> 
    </script> 

    <script src="whereNew.js"></script> 
    <script src="marketData.js"></script> 
    <script> 

    var directionsDisplay; 
    var directionsService = new google.maps.DirectionsService(); 
    var map; 
    var markerArray = []; 
    var dest ; 
    function initialize() 
    { 
     //alert("To see the title of a marker, hover over the marker but don't click."); 
     var myLatlng = new google.maps.LatLng(22.39361,88.099263) 
     var mapOptions = { 
      zoom: 3, 
      center: myLatlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
      } 

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


     var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 
     i = 0; 
     var markers = []; 

     for (pos in myData) 
     {  
      var row = myData[pos]; 
      var row1 = MarketInfo[i]; 
      window.console && console.log(row) && console.log(row1); 
      // if (i < 3) { alert(row); } 
      var newLatlng = new google.maps.LatLng(row[0], row[1]); 
      var marker = new google.maps.Marker(
      { 
       position: newLatlng, 
       map: map, 
       title: row[3], 
      }); 

      var infowindow = new google.maps.InfoWindow({ }); 
      var largeInfowindow = new google.maps.InfoWindow({ }); 
      dest = row1[1]; 
      var content = row1[2] + '<br/><button onclick = "calculateAndDisplayRoute(directionsDisplay, directionsService, markerArray, map, dest);">Show Routes</button>'; 

      if((content.search("WHOLESALE"))>-1) 
      { 
       marker.setIcon('http://maps.google.com/mapfiles/ms/icons/red-dot.png'); 
      } 
      else if((content.search("WHOLE SALE"))>-1) 
      { 
       marker.setIcon('http://maps.google.com/mapfiles/ms/icons/red-dot.png'); 
      } 
      else if((content.search("MAJOR"))>-1) 
      { 
       marker.setIcon('http://maps.google.com/mapfiles/ms/icons/blue-dot.png'); 
      } 
      else 
      { 
       marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png'); 
      } 

      google.maps.event.addListener(marker,'click', (function(marker,content,infowindow) 
      { 
       return function() 
       { 
        infowindow.setContent(content); 
        infowindow.open(map,marker); 
       }; 
      })(marker,content,infowindow)); 

      markers.push(marker); 
      i = i + 1; 
     } 




     function populateInfoWindow(marker, infowindow) 
     { 
      if(infowindow.marker != marker) 
      { 
       infowindow.marker = marker; 
       infowindow.setContent('<div>'+infowindow.content+'</div>'); 
       infowindow.open(map, marker); 

       infowindow.addListener('closeclick', function(){ 
       infowindow.setMarker(null); 
       }); 

      } 
     } 
    } 

    function calculateAndDisplayRoute(directionsDisplay, directionsService, markerArray, map, dest) 
    { 
     for (var i = 0; i < markerArray.length; i++) 
     { 
     markerArray[i].setMap(null); 
     } 

     for (pos in MarketInfo) 
     { 
     var row = MarketInfo[pos]; 
     // Second loop for multiple destination 
     var str_array = row[7].split(','); 
     for (var j = 0; j < str_array.length; j++) 
     { 
      directionsService.route(
      { 
      origin: str_array[j], 
      destination: dest, 
      travelMode: 'DRIVING' 
      }, function(response, status) { 
       if (status === 'OK') 
       { 
        document.getElementById('warnings-panel').innerHTML = '<b>' + response.routes[0].warnings + '</b>'; 
        var dirDisplay = new google.maps.DirectionsRenderer({ 
        map: map 
       }); 
       dirDisplay.setDirections(response); 
       }else 
       { 
        window.alert('Directions request failed due to ' + status); 
       } 
      }); 
     } 
    } 
    } 


    </script> 

    <body onload="initialize()"> 
<div id="map_canvas" style="height: 600px"></div> 
<p> 
<b>Developed by</b> 
<a href="http://www.linkedin.com/in/arnab-chakravarty-8a329111b?trk=nav_responsive_tab_profile"><b>Arnab Chakravarty</b></a>. 
</p> 
</body> 
</html>

01を助けてください。

whereNew.js

myData = [ 
[22.5193768,88.3656851, 'K.M.C. Market, 3rd Floor Market Complex, 212, Rash Behari Avenue Road, Hindustan Park, Gariahat, Kolkata, West Bengal 700019, India', 'PAL BAZAR'], 
[22.4977887,88.3796042, 'Garfa Main Rd, Kolkata, West Bengal 700075, India', 'RAMLAL BAZAR'], 
[22.5048463,88.3882325, 'Purbachal Main Rd, Ramlal Bazar, Haltu, Kolkata, West Bengal 700078, India', 'COLLEGE STREET MARKET (SPORTS GOODS)'] 
];

MarketData.js

MarketInfo = [ 
["GARIAHAT KMC MARKET", "K.M.C. Market, 3rd Floor Market Complex, 212, Rash Behari Avenue Road, Hindustan Park, Gariahat, Kolkata- 700019", "MAJOR (1400SHOP + HOWKER)", "FRUITS, VEGETABLES, FLOWER, FISH, MEAT, GROCERY, CLOTHING, FURNITURE , HOUSEHOLD, FOOTWEAR ELECTRICAL ETC", "", "", "BARABAZAR, KOLEYMART", "HOWRAH", "We collect the goods ourselves", "", "MANY", "Cars, Light goods vehicles (LGV), Heavy goods vehicles/lorries (HGV)", "Within one hour", "", "", "No problems encountered", "", "IF A UNLOADING SPACE CAN PROVIDE BY GOVT. IT WILL BE BETTER"], 
["PAL BAZAR", "GARIFA MAIN ROAD, KOLKATA - 700 075", "MINOR (150SHOP + 70HOWKERS)", "FRESH, COOL AND FROZEN PRODUCT, OTHER TYPE OF CONSUMER GOODS, TEXTILE,FOOTWEAR, ELECTRONIC AND ELECTRICAL EQUIPMENT, BUILDING MATERIALS", "", "SANDHYA BAZAR", "BARA BAZAR, CHADNI CHOWK", "", "The goods are delivered by multiple suppliers", "MANY", "10 TO 20", "Bicycles/tricycles/carts, Motorised two/three-wheelers", "Within one hour", "", "", "Delivery vehicle causes traffic jams in front of the establishment", "", ""], 
["RAMLAL BAZAR", "Purbachal Main Rd, Ramlal Bazar, Haltu. Kolkata-700078", "MINOR (150 SHOP+ 180 HOWKERS)", "FRUITS, VEGETABLE, FISH, MEAT, GROCERY, TEXTILE, ELECTRICAL, BUILDING MATERIALS ETC", "", "BAGHAJATIN AND SANDHYA BAZAR", "BARA BAZAR, EZRA ST.", "", "We collect the goods ourselves", "", "MANY", "Bicycles/tricycles/carts, Motorised two/three-wheelers, Light goods vehicles (LGV)", "Within one hour", "", "", "Limited storage space available, Delivery vehicle causes traffic jams in front of the establishment, High delivery costs", "", "PARKING PLACE REQUIRE"] 
];

出典

2017-07-28 ArnabC

あなたがすべきではない、あなたのコード内の ''}どこかに持っています。 –

@ JohnM私は2回チェックしました。私はそれが問題だとは思わない。 – ArnabC

問題は、二重引用符で関数名を見込んコード

のこの行に

var content = row1[2] + '<br/><button onclick = calculateAndDisplayRoute(directionsDisplay, directionsService, markerArray, map, row1[1]);>Show Routes</button>';

onclickある

HTMLを文字列として作成するため、渡すパラメータは取得されません。グローバル変数を試して結果を見ることができます。

編集：

var directionsDisplay; 
var directionsService = new google.maps.DirectionsService(); 
var map; 
var markerArray = []; 
function initialize() {

変更誤った行をする：

var content = row1[2] + '<br/><button onclick="calculateAndDisplayRoute(' + i + ')">Show Routes</button>';

私はあなたのグローバル変数は外部の機能を初期化宣言コード

に次の変更を行いました

通知、私は行識別子（i）を送信しています。私は他のすべてのパラメータを削除しました。 calculateAndDisplayRouteため

シグネチャは次のとおりです。

function calculateAndDisplayRoute(i) { 
     var destination1 = MarketInfo[i][1]; 
... 
}

出典

2017-07-28 11:02:41

あなたが尋ねたことはありましたが、コードはまだ実行されません。 – ArnabC

答えを更新しました –

はい、問題を修正しました。ありがとう – ArnabC

Uncaught TypeError：プロパティ 'route'を読み取ることができません

答えて

関連する問題