谷歌地图 + asp .net mvc 3 不工作答案

【问题标题】：google maps + asp .net mvc 3 not working谷歌地图 + asp .net mvc 3 不工作
【发布时间】：2012-08-25 16:32:21
【问题描述】：

我正在自学 asp .net mvc 3。我阅读了本教程：http://www.codeproject.com/Articles/148949/ASP-NET-MVC-3-the-Razor-View-Engine-and-Google-Map 和其他几篇此类帖子。但是，我无法在我的应用程序上运行谷歌地图。我做错了什么？

查看：

    @section Scripts_head {
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    }

    <script type="text/javascript">
        function initialize() {
            var latlng = new google.maps.LatLng(40.716948, -74.003563);
            var options = { zoom: 14, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
            var map = new google.maps.Map(document.getElementById("map"), options);
        }

        $(function () {
            initialize();
        });
    </script>
<div id="map" style="width:80%; height:80%"></div>

我也尝试将 div 放在 script 标签上。

布局页面：

<head>
    ...
    @RenderSection("Scripts_head", false)
</head>

控制器：

public class MapController : Controller
{
    //
    // GET: /Map/

    public ActionResult Index()
    {
        return View();
    }

}

【问题讨论】：

运气好吗？我正在按照相同的教程为 mvc 4 执行此操作，但看不到任何结果。
只是地图大小给我造成了问题。

标签： asp.net-mvc-3 google-maps

【解决方案1】：

如果您没有错误，那么它可能是您的 div“地图”的大小。这是您在 JsFiddle 中提取和工作的代码： http://jsfiddle.net/GNwU8/3/

【讨论】：

【解决方案2】：

给你地图 div 一个绝对大小。你有：

<div id="map" style="width:80%; height:80%"></div>

...但那是什么的 80%？

改为尝试：

<div id="map" style="width:400px; height:300px"></div>

【讨论】：