我专门创建了一个使用Google导航的方向模板文件。我有剧本外Magento工作。不幸的是,当我把脚本移动到页面/方向。php控制台返回以下错误:
"Uncaught ReferenceError: google is not defined"
当我尝试单击触发calcRoute()函数的test时,我得到以下错误:
"未捕获的TypeError: Cannot call method 'route' of undefined"
我认为这些错误与谷歌地图API调用有关,但是图形地图在页面上显示和运行良好。这些错误与google.maps.DirectionsService()被调用来定义如下所示的javascript的第2行directionsService和directionsService有关。路由在最后被调用。两者都与方向有关。
为什么地图显示,但方向抛出错误时,脚本工作是在我的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);
}
});
}