Javascript 尝试在Magento中使用Google地图方向时出错（未捕获引用错误：未定义Google）

我已经创建了一个方向模板文件，专门利用谷歌方向。我让脚本在Magento之外工作。不幸的是，当我将脚本移动到page/directions.phtml控制台时，返回以下错误：

“未捕获引用错误：未定义google”

当我尝试单击触发calcRoute（）函数的test时，出现以下错误：

“未捕获的TypeError:无法调用未定义的方法'route'”

我认为这些错误与GoogleMapsAPI调用有关，但是图形地图在页面上显示和运行良好。这些错误与调用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>

#我将这一行包括在文档头中
#地图方向{宽度：65%；高度：300px；浮动：左侧；边框：5px实心#EEEEEE；}
#获取方向{width:65%；float:left；}
.map侧边栏{宽度：32%；高度：300px；浮点：右；}
问路
完:
门店位置1
门店位置2
门店位置3
门店位置4
测试

您应该遵循以下步骤：

首先调用GoogleMapAPI

然后给你自己的JS打电话

在

body onload=directionsMap（）

中激发

directionsMap（）

，而不是

style

onload

我认为您的主要问题是，您在google完成加载之前调用了

directionsMap（）

函数

因此，我认为在jQuery加载事件中调用

directionsMap（）

是更好的选择，如：

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

---

你是在调用谷歌api之前发布的javascript吗？我无法从你的代码中看到你在哪里调用它。这就是问题所在，请查看我选择的答案下的注释。谢谢你的帮助！很抱歉，我在排除故障时很时髦。它在我的身体标签上。你的建议正是我在做的。如果我交换步骤1和步骤2，您列出的地图根本不会加载。地图正在加载的事实让我相信它正在被调用。你是对的！！！我专门放了一些断点来测试这一点。它必须是部分加载的，这就是为什么地图显示出来了，但是订单的某些东西把它搞乱了。我通过将我的JS移动到文档中来测试这个理论（只是为了保证它是在调用之后）。从理论上看，加载顺序似乎是正确的，但实际上并非如此。谢谢你的帮助。