谷歌地图未加载到容器中答案

【问题标题】：Google Map not loading in container谷歌地图未加载到容器中
【发布时间】：2013-02-08 16:05:12
【问题描述】：

我正在尝试在 <td> 中加载 Google 地图，但我找不到问题。

脚本

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(33, 73),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"),
            mapOptions);

}

HTML

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

    <table class="style1">
        <tr>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
        </tr>
        <tr>
            <td colspan="6" id="map" style="height:600px;">
                &nbsp;</td>
        </tr>
    </table>

</asp:Content>

您可以在下图中看到我的地图是如何加载的，它应该被加载到浅灰色区域。

【问题讨论】：

尝试将其加载到div 而不是td 或table。
什么定义了单元格的宽度？
我用 width:auto 和 width:500px 检查了它。它给出了相同的结果。
谢谢 Sparky！有效。 :)
如果您将表格用于布局目的，那么除非它是实际的表格数据，否则您做错了。改为使用 div、页眉、页脚、部分、导航、文章、跨度、旁边等。

标签： asp.net css google-maps google-maps-api-3

【解决方案1】：

在 td 中创建一个 div

<td colspan="6" style="height:600px;">
        <div id="map" style="width:100%; height:100%"></div>         
</td>

【讨论】：