Question

我目前是一名新手网络开发人员，而且我无法理解为什么我在工作中注入了新的Google Maps API，因此无法加载地图的所有图块。

我将地图放入的div在页面加载时设置为隐藏。当您使用导航切换到div并显示自身时，只显示一个小方块的地图。您无法拖动地图并强行加载，但如果您打开Chrome开发者工具，地图会重新渲染，但会略微移动地图的中心。以下是我到目前为止的代码，它是相当基本的;

HTML脚本（一旦我解决了这个问题，我打算转到我的自定义Javascript文件）：

    <script type="text/javascript">
    var map;
    function initialize() {
        var mapOptions = {
            zoom: 15,
            center: new google.maps.LatLng(39.931305, -74.177920)
        };

        map = new google.maps.Map(document.getElementById('MapCanvas'),
            mapOptions);
    }
    function addMarker() {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(39.931305, -74.177920),
            title:'Eaglespeed Auto Repair',
            map:map
        });
    }
</script>

HTML标记：

    <div id="Contactbody">
    <div id="MapCanvas"></div>
    <table>
        <tbody>
            <tr>
                <td class="tableH" colspan="2">HOURS</td>
            </tr>
            <tr>
                <td class="day">Mon</td>
                <td class="hours">8 - 6</td>
            </tr>
            <tr>
                <td class="day">Tues</td>
                <td class="hours">8 - 6</td>
            </tr>
            <tr>
                <td class="day">Wed</td>
                <td class="hours">8 - 7</td>
            </tr>
            <tr>
                <td class="day">Thur</td>
                <td class="hours">8 - 6</td>
            </tr>
            <tr>
                <td class="day">Fri</td>
                <td class="hours">8 - 6</td>
            </tr>
            <tr>
                <td class="day">Sat</td>
                <td class="hours">7:30 - 3:30</td>
            </tr>
            <tr>
                <td class="day">Sun</td>
                <td class="hours">8:30 - 1</td>
            </tr>
        </tbody>
    </table>
</div>

CSS：

    #Contactbody {
    position: relative;
    display: none;
    margin: 1% 0 1% 15%;
    width: 70%;
    height: 50%;
    border-left: 4px solid #ffe168;
}

    #Contactbody:after {
        display: block;
        clear: both;
        height: 0;
        content: " ";
    }

#MapCanvas {
    position: absolute;
    height: 100%;
    width: 60%;
    float: left;
    margin-left: 5%;
}

    #Contactbody table {
        float: right;
        margin-right: 5%;
        width: 25%;
        font-family: Aleygra Sans SC, Maven Pro, Verdana, Arial;
    }

.tableH {
    color: #0b0658;
    vertical-align: middle;
    text-align: center;
    font-weight: bold;
    font-size: 22px;
}

.day {
    color: #32305a;
    vertical-align: middle;
    text-align: left;
    font-size: 18px;
}

.hours {
    color: #982929;
    vertical-align: middle;
    text-align: right;
    font-size: 18px;
}

如果您想查看我正在谈论的内容，则链接为here

Answer 1

没有完全加载Google地图的原因是你隐藏了它，因此它没有显示出来。

要解决此问题，只要您显示地图，就必须触发 resize事件（由Google地图API提供）。

google.maps.event.trigger(map, "resize");

更新

我刚刚调用了代码的 custom.js ，这是您需要添加代码的地方。

$(".Contact").click(function () {
        if (cPage != 3) {
            cPage = 3;
            $("#Homebody").css({ "display": "none" });
            $("#Servicebody").css({ "display": "none" });
            $("#Contactbody").css({ "display": "block" });
            $("#Maphelp").css({ "display": "block" });
            google.maps.event.trigger(map, "resize");
        }
    });

Javascript嵌入式Google地图无法完全加载

1 个答案:

更新