谷歌地图未在部分视图中显示答案

【问题标题】：Google map not showing in partial view谷歌地图未在部分视图中显示
【发布时间】：2012-06-27 23:31:06
【问题描述】：

我正在开发一个 asp.net mvc3 应用程序。

我正在尝试在局部视图中加载谷歌地图，但它不起作用：

我的局部视图_Map.cshtml

<style type="text/css">  
    #map_canvas 
    {
        position:absolute;
        top:40px;
        left:12px;
        width:576px;
        height: 450px;
    }

</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div class="sTitle">Name</div>

<div id="map_canvas"></div>


<script type="text/javascript">
var map;
$(document).ready(function () {
    var map;
    var myOptions = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map_canvas'),
        myOptions);

    google.maps.event.addDomListener(window, 'load', initialize);
});

</script>

地图是通过 AJAX 调用加载的：

         $.ajax({
                type: 'GET',
                url: '@Url.Action("GetMapById", "Map")',
                data: { 'id': sId },
                success: function (html) {
                    $("#content").html(html);
                },
                complete: function () {
                },
                error: function () {
                    alert("There was an error opening the Map. Please try again or contact an administrator");
                }
            });

部分加载在名为 Content 的 div 中

在控制器中我只返回部分视图

 return PartialView("_Map");

视图正在加载，但地图不可见。

我使用 Firebug 跟踪问题并收到此错误：

“google is not defined”

对这个问题有任何想法吗？

非常感谢

【问题讨论】：

标签： asp.net-mvc-3 google-maps-api-3 partial-views

【解决方案1】：

我解决了这个问题

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

在布局页面中而不是在子视图中

【讨论】：

我遇到了同样的问题。我不想在布局页面中加载地图，因为这显然会导致加载站点其余部分的延迟，无论出于何种原因，地图脚本都需要很长时间才能加载。这个问题还有什么其他的解决方案？

【解决方案2】：

你必须以这种方式加载谷歌地图：

<script type="text/javascript">
   var map;
   google.load("maps", "3", { other_params:"sensor=false" });
   $(document).ready(function () {

然后你重新初始化“var map”两次。

【讨论】：

【解决方案3】：

我不想在布局页面中加载地图...这样做意味着如果脚本需要很长时间才能加载，它会减慢整个页面，此外，如果那里不需要它，那么为什么要让浏览器下载呢？

为了解决这个问题，我发现您可以像这样在局部视图中加载地图 API：

$.getScript('http://maps.googleapis.com/maps/api/js',function (){
  google.maps.event.addDomListener(window, 'load', initialize);
});

【讨论】：