嘗試在Magento中使用谷歌地圖方向的錯誤（未捕獲的ReferenceError：谷歌未定義）

Question

我已經創建了一個專門用於Google方向的方向模板文件。我有腳本在Magento之外工作。不幸的是當我移動到腳本頁/ directions.phtml控制檯返回以下錯誤：

「未捕獲的ReferenceError：谷歌沒有定義」

當我嘗試一下測試，觸發關閉calcRoute（）函數，我收到以下錯誤：

「遺漏的類型錯誤：無法調用未定義的方法‘路線’」

我想這些錯誤有事情做與谷歌地圖API調用，但是圖形地圖顯示並在頁面上正常運行。這些錯誤特別與調用google.maps.DirectionsService（）來定義下面顯示的javascript的第2行的directionsService和最後調用directionsService.route時相關。兩者都與方向有關。

爲什麼會顯示地圖，但腳本在我的html測試中工作時會拋出錯誤？我很困惑。

的Javascript

var directionDisplay; 
    var directionsService = new google.maps.DirectionsService(); 
    var map; 

    function directionsMap() { 
    directionsDisplay = new google.maps.DirectionsRenderer(); 
    var chicago = new google.maps.LatLng(38.77627, -95.910965); 
    var mapOptions = { 
     zoom:4, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: chicago 
    } 
    map = new google.maps.Map(document.getElementById('map-directions'), mapOptions); 
    directionsDisplay.setMap(map); 

    //Place Markers 
    var baldwinsvilleMarker = new google.maps.Marker({ 
     position: new google.maps.LatLng(00.00000, 00.00000), 
     map: map, 
     title:"store location 1" 
    }); 
    var sacramentoMarker = new google.maps.Marker({ 
     position: new google.maps.LatLng(00.00000, 00.00000), 
     map: map, 
     title:"store location 2" 
    }); 
    var stLouisMarker = new google.maps.Marker({ 
     position: new google.maps.LatLng(000.00000, -000.00000), 
     map: map, 
     title:"store location 3" 
    }); 
    var catersvilleMarker = new google.maps.Marker({ 
     position: new google.maps.LatLng(00.000000, -84.000000), 
     map: map, 
     title:"store location 4" 
    }); 

    directionsDisplay.setMap(map); 
    directionsDisplay.setPanel(document.getElementById("get-directions")); 

    } 

    function calcRoute() { 
    console.log("calcRoute ran") 
    var start = document.getElementById('start').value; 
    var end = document.getElementById('end').value; 
    console.log(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); 
     } 
    }); 
    } 

HTML

  #I am including this line in the document head 
      <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
      <style onload="directionsMap()"> 
      #map-directions{width: 65%; height: 300px; float: left; border:5px solid #EEEEEE;} 
      #get-directions{width: 65%; float: left;} 
      .map-sidebar{width: 32%; height: 300px; float: right;} 
      </style> 

      <div id="map-directions"></div> 
      <div class="map-sidebar"> 
       <h2>Get Directions</h2> 

       <input type="text" id="start" value="chicago, il"/> 
       <b>End: </b> 
       <select id="end" onchange="calcRoute();"> 

        <option value="value 1"> 
         store location 1 
        </option> 

        <option value="value 2"> 
         store location 2 
        </option> 

        <option value="value 3"> 
         store location 3 
        </option> 

        <option value="value 4"> 
         store location 4 
        </option> 

       </select> 
       <button onclick="calcRoute();"> test</button> 


      </div> 
      <div id="get-directions"></div> 

Answer 1

您應該遵循一個循序漸進的調用，比如：

1. 首先調用谷歌地圖API

2. 然後body onload=directionsMap()調用自己的JS

3. 火directionsMap()，不style onload事件。

我認爲您的主要問題是，您在谷歌完成其加載之前調用directionsMap()函數。

所以我覺得它更好的選擇jQuery的負載事件中調用directionsMap()這樣的：

$(function() { 
    directionsMap() 
});