Asp.net mvc 如何在MVC5应用程序中集成Google地图？

我正在遵循，并希望将其集成到ASP.NET的MVC中。我可以启动page start.html，并查看_Layout.cshtml的元素，但谷歌地图不会显示。你能帮我修一下吗？非常感谢。 在views/Start.html中

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
} 

@{
    ViewBag.Title = "Road Trip Agent";
} 
<h3>@ViewBag.Message</h3>
@Styles.Render("~/bundles/map")
<p></p> 

<div id="map"></div>
@section Scripts {
    @Scripts.Render("~/bundles/jquery")

<script>

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}

</script>
<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=I have put my key here&callback=initMap">
</script>

}

在Content/map.css中：

html, body { height: 100%; margin: 0; padding: 0; }
  #map { height: 100%; }

如果您使用：

    <div id="map" style="width:800px; height:500px;"></div>

i、 e.

px

而不是

%

显示

    <div id="map" style="width:800px; height:500px;"></div>