HTML: Fit Google Maps into the Twitter-Bootstrap div

Question

I'm trying to integrate the google maps into my webserver. As I'm not a Front-End developer I'm having some difficulties with bootstrap elements. So as far as I can see, I was only able to code the necessary things for google maps to work.

Here's part of my code from 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>

And from the other HTML file, I'm trying to reach it with:

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

In the Developer console I can see that the element has these CSS elements:

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

Although the map isn't visible till I remove the position relative element. How can I "Insert" the map into the jumbotron or make it look like it?

You can see the jumbotron I have right now, and this is the size that I want the map to be.

Answer 1

All I had to do was change the CSS elements to:

height: 500px;
width: 100%;

And put them in a container-fluid div

HTML: Fit Google Maps into the Twitter-Bootstrap div

Question

1 answers

solution1
0 2020-07-17 11:42:28

HTML: Fit Google Maps into the Twitter-Bootstrap div

Question

1 answers

solution1 0 2020-07-17 11:42:28

solution1
0 2020-07-17 11:42:28