I am currently working on integrating a map widget into a dashboard I created using gridstack.js. The sample widget layout that I am aiming for can be seen in the link below:
https://i.sstatic.net/ZQP6G.png
My goal is to embed the map within the inner (white color) div of the widget. However, upon doing so, the map ends up covering the entire widget div, concealing the grey border and the widget title. Can you help me understand why this happens and provide guidance on resolving this issue?
Below is the code snippet responsible for adding the map to the designated 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 sections are quite lengthy. Here's an excerpt of the essential 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;
}