Javascript 如何在引导模式下使用带搜索框的地图

我想在modal中创建一个谷歌地图，它可以工作，但在我尝试使用 我的地图上的搜索框显示错误

这是我的密码：

函数initAutocomplete（）{
map=new google.maps.map（document.getElementById（'map1'）{
中心：{lat:-33.8688，lng:151.2195}，
缩放：13，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
//创建搜索框并将其链接到UI元素。
var input=document.getElementById（'pac-input'）；
var searchBox=newgoogle.maps.places.searchBox（输入）；
map.controls[google.maps.ControlPosition.TOP_LEFT].push（输入）；
//将搜索框结果偏向当前地图的视口。
addListener（'bounds_changed'，function（）{
searchBox.setBounds（map.getBounds（））；
});
var标记=[]；
//[开始区域\u getplaces]
//侦听用户选择预测并检索时激发的事件
//关于那个地方的更多细节。
searchBox.addListener（'places\u changed'，function（）{
places=searchBox.getPlaces（）；
如果（places.length==0）{
返回；
}
//清除旧的标记。
markers.forEach（函数（marker）{
marker.setMap（空）；
});
标记=[]；
//对于每个位置，获取图标、名称和位置。
var bounds=new google.maps.LatLngBounds（）；
地点。forEach（功能（地点）{
变量图标={
大小：新谷歌地图大小（71,71），
来源：新google.maps.Point（0,0），
主播：新google.maps.Point（17,34），
scaledSize:new google.maps.Size（25,25）
};
//为每个地方创建一个标记。
markers.push（新的google.maps.Marker）({
地图：地图，
图标：图标，
标题：place.name，
位置：place.geometry.location
}));
if（place.geometry.viewport）{
//只有地理代码具有视口。
联合（place.geometry.viewport）；
}否则{
扩展（place.geometry.location）；
}
});
映射边界（bounds）；
});
google.maps.event.addListener（映射，'click'，函数（事件）{
地点标记（事件标记）；
});
}
功能位置标记（位置）{
如果（标记！=null）
marker.setMap（空）；
marker=新的google.maps.marker({
位置:位置,，
地图：地图，
动画：google.maps.animation.BOUNCE
});
标记=标记；
}