Javascript ASP.NET Core 3谷歌地图破解容器（razorpages）

我试图从GoogleAPI添加一个地图视图，由于某种原因，它打破了cardview中容器的边界

地图只能在绿色边框内交互，但我可以在我绘制的红色边框内移动地图。

下面是一段视频来说明问题：

Carpools.cshtml

@page
@使用系统。全球化
@{
@model Zealand_Carpool.Pages.CarpoolPage.CarpoolsModel
}
地图
#地图{
高度：200px；
/*宽度：400px；
剩余利润：60%*/；
保证金：自动；
}
瑟格
瑟格
@foreach（Models.Carpool在Model.allcarpool中拼车）
{
地址fra:@carpool.Driver.AddressList[0]。街道名称@carpool.Driver.AddressList[0]。街道编号Til:@carpool.Branch.BranchName
函数初始化映射（）{
var latlng=new google.maps.latlng（@carpool.Driver.AddressList[0]。Latitude.ToString（new CultureInfo（“en-US”），@carpool.Driver.AddressList[0]。longtudity.ToString（new CultureInfo（“en-US”）；
变量myOptions={
缩放：12，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“map”），myOptions）；
新的google.maps.Marker({
位置：latlng，
地图，
标题：“新西兰”，
});
}
kørsel的Dato:@carpool.Date.ToString（）

Kør med！
}