Javascript 谷歌地图内的引导模式不起作用

我试图添加谷歌地图在引导模式，但它不为我工作。当我点击链接时，它会打开模态窗口，但地图显示不正确，没有模态它工作正常，但我不知道，现在发生了什么

$（文档）。在（“单击“，”。打开AddBookDialog”，函数（）{
var myBookId=$（this.data（'id'）；
$（“.modal body#bookId”）.val（myBookId）；
});
$（函数（）{
var lat=13.034118，
液化天然气=77.5679959；
latlng=新的google.maps.latlng（lat，lng），
图像处理http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png';
//动物控制：对，
//ZoomControl选项：google.maps.ZoomControl样式.LARGE，
变量映射选项={
中心：新google.maps.LatLng（lat，lng），
缩放：13，
mapTypeId:google.maps.mapTypeId.ROADMAP，
泛控制：对，
全控选项：{
位置：google.maps.ControlPosition.TOP\u右
},
动物控制：对，
ZoomControl选项：{
样式：google.maps.ZoomControlStyle.LARGE，
位置：google.maps.ControlPosition.TOP_左
}
},
map=new google.maps.map（document.getElementById（'map_canvas'）、mapOptions），
marker=新的google.maps.marker({
位置：latlng，
地图：地图，
图标：图像
});
var input=document.getElementById（'searchTextField'）；
var autocomplete=new google.maps.places.autocomplete（输入{
类型：[“地理编码”]
});
autocomplete.bindTo（'bounds'，map）；
var infowindow=new google.maps.infowindow（）；
google.maps.event.addListener（自动完成，'place\u changed'，函数（事件）{
infowindow.close（）；
var place=autocomplete.getPlace（）；
if（place.geometry.viewport）{
map.fitBounds（place.geometry.viewport）；
}否则{
地图。设置中心（地点。几何。位置）；
map.setZoom（17）；
}
moveMarker（place.name、place.geometry.location）；
$（'.MapLat'）.val（place.geometry.location.lat（））；
$（'.MapLon'）.val（place.geometry.location.lng（））；
});
google.maps.event.addListener（映射，'click'，函数（事件）{
$（'.MapLat'）.val（event.latLng.lat（））；
$（'.MapLon'）.val（event.latLng.lng（））；
infowindow.close（）；
var geocoder=new google.maps.geocoder（）；
地理编码({
“latLng”：event.latLng
}，功能（结果、状态）{
控制台日志（结果、状态）；
if（status==google.maps.GeocoderStatus.OK）{
控制台日志（结果）；
var lat=results[0]。geometry.location.lat（），
lng=结果[0]。几何体。位置。lng（），
placeName=results[0]。地址\u组件[0]。长\u名称，
latlng=新的google.maps.latlng（lat，lng）；
移动标记（地名、latlng）；
$（“#searchTextField”）.val（结果[0]。格式化的_地址）；
}
});
});
功能移动标记（地名、latlng）{
marker.setIcon（图像）；
标记器设置位置（板条）；
infowindow.setContent（placeName）；
//信息窗口。打开（地图、标记）；
}
});

@导入url（'http://getbootstrap.com/dist/css/bootstrap.css');

地址:


&时代；
情态标题
接近
保存更改

谷歌地图（Google Maps）将“灰色”区域放置在动态元素中（例如：调整大小、淡入淡出等）。触发“resize”（调整大小）功能，该功能应在动画完成后调用（显示的

）应能实现以下功能：

$("#myModal").on("shown.bs.modal", function () {
    google.maps.event.trigger(map, "resize");
    map.setCenter(latlng);
});

$（文档）。在（“单击“，”。打开AddBookDialog”，函数（）{
var myBookId=$（this.data（'id'）；
$（“.modal body#bookId”）.val（myBookId）；
});
$（函数（）{
var lat=13.034118，
液化天然气=77.5679959；
latlng=新的google.maps.latlng（lat，lng），
图像处理http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png';
//动物控制：对，
//ZoomControl选项：google.maps.ZoomControl样式.LARGE，
变量映射选项={
中心：新google.maps.LatLng（lat，lng），
缩放：13，
mapTypeId:google.maps.mapTypeId.ROADMAP，
泛控制：对，
全控选项：{
位置：google.maps.ControlPosition.TOP\u右
},
动物控制：对，
ZoomControl选项：{
样式：google.maps.ZoomControlStyle.LARGE，
位置：google.maps.ControlPosition.TOP_左
}
},
map=new google.maps.map（document.getElementById（'map_canvas'）、mapOptions），
marker=新的google.maps.marker({
位置：latlng，
地图：地图，
图标：图像
});
var input=document.getElementById（'searchTextField'）；
var autocomplete=new google.maps.places.autocomplete
$(document).on("click", ".open-AddBookDialog", function() {
  $('#map_canvas').html($('#test').clone());
  var myBookId = $(this).data('id');
  $(".modal-body #bookId").val(myBookId);
});