CODEWITHSUNDEEP
javascripthtmlcssgoogle-mapsgridstack
Ruwangi
Ruwangi

Reputation: 243

Google Map Overflows to Outer Div

I am trying to add a map widget to a dashboard I make using gridstack.js. A sample widget looks like this:

enter image description here

I want to add the map to the inner (white color) div but when I do it the map displays covering the entire widget div, hiding the grey color border and the widget title. Why does this happen and how can I fix this?

Following is the code to add the map to the relevant div:

function addMapToDiv(widgetID, flightPlanCoordinates) {
    var colCount = 0;
    var map = new google.maps.Map(document.getElementById(widgetID), {
        zoom: 1,
        center: { lat: 0, lng: -180 },
        mapTypeId: 'roadmap'
    });

    var colors = ["#FF0000", "#FFFF00", "#FF00FF", "#00FF00"];

    for (var key in flightPlanCoordinates) {
        var flightPath = new google.maps.Polyline({
            path: flightPlanCoordinates[key],
            geodesic: true,
            strokeColor: colors[colCount],
            strokeOpacity: 1.0,
            strokeWeight: 2
        });
        colCount++;
        flightPath.setMap(map);
    }
}

Edit: The HTML and CSS are rather lengthy. Here are necessary parts:

HTML:

<div id="widget_map0" style="display: flex;" onresize="resizeWidget(id)" ondrag="dragWidget()" data-gs-x="0" data-gs-y="66" data-gs-width="6" data-gs-height="6" class="grid-stack-item ui-draggable ui-resizable">
    <div class="grid-stack-item-content widget-background-color w3-round ui-draggable-handle">
        <span id="closewidget_map0" class="closebtn margin-right" data-toggle="tooltip" data-placement="top" title="Remove"><img src="img/delete.png"></span><span id="settingswidget_map0" class="settingsbtn margin-right" data-toggle="tooltip" data-placement="top" title="Settings"><img src="img/settings1.png"></span>
        <div class="w3-widget-content">
            <div class="widget-color">
                <p id="title_map0" class="chart-title-font">chart</p>
                <div id="map0" class="widget-color map-div" style="display: block; margin: 0px auto; height: 100%; position: relative; overflow: hidden;">
                    <!-- Map -->
                </div>
            </div>
        </div>
    </div>
    <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90; display: block;"></div>
    <div class="ui-resizable-handle ui-resizable-w" style="z-index: 90; display: block;"></div>
</div>

CSS:

.map-div {
    position: static !important;
    display: block; 
    margin: 0px auto; 
    height: 100%; 
    position: relative; 
    overflow: hidden;
}

Upvotes: 4

Views: 2064

Answers (1)

Alexander Higgins
Alexander Higgins

Reputation: 6923

Typically you embed your google map inside of a div and set the size of the div.

When the map renders it displays an Iframe that fits itself to the size of that div.

Make sure you have a size set on the div. If it is because the div is too small, you can try setting 'overflow:hidden' on the div.

If that doesn't work open web developer console and view the styles. Switch styles on/off and/or add new ones until you can apply CSS rules to stop it from over flowing.

Upvotes: 2

Related Questions