如何在MVC5应用程序中集成G​​oogle Map？

Question

我关注introduction of Google Map API并希望将其集成到ASP.NET的MVC中。我可以启动页面start.html，并查看_Layout.cshtml的元素，但Google Map不会显示。你能帮我解决这个问题吗？谢谢！ 在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>

}

在App_Start / BundleConfig.cs中： ....

  bundles.Add(new StyleBundle("~/bundles/map").Include(
                    "~/Content/bootstrap.csss",
                    "~/Content/jquery-ui.css",
                    "~/Content/map.css"));

...

在Content / map.css中：

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

Answer 1

如果您使用：

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

即。 <{1}}代替px显示。