谷歌地图js api。页面上有很多地图答案

【问题标题】：Google maps js api. Many maps on page谷歌地图js api。页面上有很多地图
【发布时间】：2015-11-06 10:09:06
【问题描述】：

我有手风琴（twitter-bootstrap），每个手风琴上都有一张地图。手风琴块在 foreach 中生成。地图生成为局部视图，它采用具有经纬度和块 ID 的模型。

它调用foreach：

@if (item.Latitude != null)
{
    <p>Map:</p>
    <div class="map-margin">
         @{Html.RenderAction("Map", "Default", new {model = item});}
    </div>
}

并且动作返回这个局部视图：

@model MPS.Administration.Models.ReportModel

<div id="map-canvas-@Model.Id.ToString()" style="width: 470px; height: 270px;"></div>

<script type="text/javascript">
    $('#map-canvas-@Model.Id').ready(function() {
        initialize();
    });

    function initialize() {

        var lat = @Model.Latitude;
        var lng = @Model.Longitude;

        var latlng = new google.maps.LatLng(@Model.Latitude, @Model.Longitude);
        debugger;

        var mapOptions = {
            center: latlng,
            zoom: 17,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var name = 'map-canvas-' + @Model.Id.ToString();
        var map = new google.maps.Map(document.getElementById(name),mapOptions);

        debugger;

        // create a marker
        var image = '../Content/Images/map_icon.png';
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            icon: image
        });
    }
</script>

在布局上我包含了 js api 的脚本。

现在我有 4 个块，但只有最后一个块有地图块（它只有 google 徽标和没有地图的灰色背景:(）。在调试器中，我看到 lat 和 lng 都是相同的 4 次。我认为问题在于我如何调用 initialize() 映射。请帮我解决这个问题。

【问题讨论】：

标签： javascript asp.net-mvc twitter-bootstrap google-maps google-maps-api-3

【解决方案1】：

地图 si 仅显示在可见 div 中。对于另一个，您应该只看到灰色背景，在某些情况下，地图的一小部分位于左上角。

要查看每个区块中的地图，您应该在每次显示新地图时使用map.resize() 或更好地使用生成功能。仅在创建窗口时才调用 Initialize，在这种情况下，地图不可见失败

【讨论】：