Javascript 谷歌地图API在onclick事件中不起作用

我正在使用谷歌地图API。在加载页面时，它工作正常，但根据我的要求，当点击按钮时，我想显示谷歌地图。我的工作代码：

函数initMap（）{
var directionsDisplay=新建google.maps.DirectionsRenderer；
var directionsService=新的google.maps.directionsService；
var map=new google.maps.map（document.getElementById（'map'）{
缩放：14，
中心：{
纬度：12.9577129，
液化天然气：77.6764937
}//起点马拉塔哈利
});
方向显示.setMap（地图）；
计算显示路线（方向服务、方向显示）；
}
函数calculateAndDisplayRoute（方向服务、方向显示）{
var selectedMode=document.getElementById（'mode'）。值；
/*配置航路点*/
var-waypts=[]；
推({
地点：{
纬度：12.9583665，
液化天然气：77.6635659
}，//哈尔
中途停留：对
}, {
地点：{
纬度：12.9630167，
液化天然气：77.6268656
},
中途停留：对
});
方向服务.路线({
来源：{
纬度：12.9577129，
液化天然气：77.6764937
}，//海特。
目的地：{
拉脱维亚：12.9868068，
液化天然气：77.6070679
}，//终点Shivaji Nagar。
travelMode:google.maps.travelMode[selectedMode]，
航路点：航路点
}，功能（响应、状态）{
如果（状态=‘正常’）{
方向显示。设置方向（响应）；
控制台日志（响应）；
}否则{
window.alert（'由于'+状态，指示请求失败）；
}
});
}

/*始终明确设置贴图高度以定义div的大小
*包含映射的元素*/
#地图{
身高：100%；
}
/*可选：使示例页面填充窗口*/
html，
身体{
身高：100%；
保证金：0；
填充：0；
}
#浮动面板{
位置：绝对位置；
顶部：10px；
左：25%；
z指数：5；
背景色：#fff；
填充物：5px；
边框：1px实心#999；
文本对齐：居中；
字体系列：“机器人”，“无衬线”；
线高：30px；
左侧填充：10px；
}

双向行驶模式
选择行程
1.
2.
提交



旅行方式：
驱动

如果不想在开始时初始化映射，请删除URL上的回调函数

 &callback=initMap

否则：

当API准备就绪时，它将调用使用 回调参数

之后，根据JSON检查

status

是否成功，并通过按钮初始化映射，然后调用

initMap

函数：

success: function(data) {
    var res = jQuery.parseJSON(data);
    if(res.status == "success") 
    {
      initMap();
    }
}

---

请提供一份报告，说明您所询问的问题。Mr@GurkanYesilyurt，我尝试了你的工作方式，在我的js中，现在纬度和经度是静态的，但我想让它成为动态的，就像我的json响应一样，我有两个结果（lat&lng），在这个lat&lng中，我只想要显示地图，怎么能做到呢？Mr@Gurkan，请参见此处var waypts=[]；waypts.push（{location:{lat:12.9583665，lng:77.6635659}，//HAL stopover:true}，{location:{lat:12.9630167，lng:77.6268656}，stopover:true}）；这里我给出的是静态的lat&lng值，而不是动态的lat&lng值（来自JSON响应）@subikshann你可以得到你想要的任何数据并传递给它函数。例如要获取第一个latitdute，请键入res.data[0]。latitdute，因为数据是数组。请把这个答案加起来，标记为已被接受，也许最好就此提出新的问题。