html - HTML：将 Google 地图放入 Twitter-Bootstrap div

问题描述

我正在尝试将谷歌地图集成到我的网络服务器中。由于我不是前端开发人员，因此我在引导元素方面遇到了一些困难。据我所知，我只能编写谷歌地图工作所需的代码。

这是我的base.html代码的一部分

<head>

<!-- Google maps -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=MY_GOOGLE_API_KEYA&callback=initMap&libraries=&v=weekly" defer></script>

<script>
    (function(exports) {
        "use strict";
    
        function initMap() {
            exports.map = new google.maps.Map(document.getElementById("map"), {
                center: {
                    lat: -34.397,
                    lng: 150.644
                },
                zoom: 8
            });
        }
        exports.initMap = initMap;
    })((this.window = this.window || {}));
    
</script>

<style>
    #map {
    height: 100%;
    }
</style>

</head>

从另一个 HTML 文件中，我试图通过以下方式访问它：

<div class="container-fluid">
    <div id="map"></div>
</div>

在开发者控制台中，我可以看到该元素具有以下 CSS 元素：

element.style {
    position: relative;
    overflow: hidden;
}
#map {
    height: 100%;
}

尽管在我删除位置相关元素之前地图不可见。如何将地图“插入”到 jumbotron 或使其看起来像它？

你可以看到我现在拥有的 jumbotron，这就是我想要的地图大小。

标签： htmltwitter-bootstrap

我所要做的就是将 CSS 元素更改为：

height: 500px;
width: 100%;

并将它们放在一个container-fluiddiv中

html - HTML：将 Google 地图放入 Twitter-Bootstrap div

问题描述

解决方案

推荐阅读