TheWeeezel TheWeeezel - 1 month ago 17
CSS Question

Google Maps automatically sets Position:relative of #map div

I have a strange problem or at least to me its kinda strange. When i style my #map div and set the position:fixed (since i need it as a background) it automatically sets the position to relative and overrides my settings. I couldnt figure out where to change this behavior.

The parent class:

.wrapper {
margin: 0;
padding: 0;
height: 100vh;
z-index: 1;
display: flex;
}


and the #map

#map {
height: 100%;
width: 100vw;
overflow: hidden;
z-index: 0;
top: 0;
left: 0;
position: fixed;


code is simple:

<div class="wrapper">
<div id="map"></div>
<div class="entries container">
{% with 940 as width %}{% placeholder content %}{% endwith %}
</p>
</div>
</div>


Now when i enter the page it first renders nicely and after a milisec the apply of the js i assume the #map div got these lines added

element.style {
position: relative;
overflow: hidden;
}


well if i change it manually it does exactly what i want it to but i cant disable this override. Has anyone else expierienced something like this? Im kinda stuck.

Im usign Chrome.

Thanks in advance for your time!
Regards

JS file:

var map;
function initialize() {
var v = {lat: 4.00, lng: 7.00};

var marker = new google.maps.Marker({
position: v,
map: map,
title: 'V!'
});

var styleArray = [
{
"featureType": "all",
"elementType": "all",
"stylers": [
{
"hue": "#ff0000"
},
{
"saturation": -100
},
{
"lightness": -30
}
]
},
{
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "all",
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#353535"
}
]
},
{
"featureType": "landscape",
"elementType": "geometry",
"stylers": [
{
"color": "#656565"
}
]
},
{
"featureType": "poi",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#505050"
}
]
},
{
"featureType": "poi",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#808080"
}
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"color": "#454545"
}
]
}
];
var mapOptions = {
center: new google.maps.LatLng(47.295065, 7.937821),
zoom: 14,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
},
disableDoubleClickZoom: false,
mapTypeControl: false,
scaleControl: false,
scrollwheel: false,
panControl: false,
streetViewControl: false,
draggable: false,
overviewMapControl: false,
overviewMapControlOptions: {
opened: false,
},
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: styleArray
};
map = new google.maps.Map(document.getElementById("map"),
mapOptions);

var locations = [
['V', 'undefined', 'undefined', 'undefined', 'undefined', 4.0, 7.0, 'https://mapbuildr.com/assets/img/markers/hollow-pin-red.png']
];
for (i = 0; i < locations.length; i++) {
if (locations[i][1] == 'undefined') {
description = '';
} else {
description = locations[i][1];
}
if (locations[i][2] == 'undefined') {
telephone = '';
} else {
telephone = locations[i][2];
}
if (locations[i][3] == 'undefined') {
email = '';
} else {
email = locations[i][3];
}
if (locations[i][4] == 'undefined') {
web = '';
} else {
web = locations[i][4];
}
if (locations[i][7] == 'undefined') {
markericon = '';
} else {
markericon = locations[i][7];
}
marker = new google.maps.Marker({
icon: markericon,
position: new google.maps.LatLng(locations[i][5], locations[i][6]),
map: map,
title: locations[i][0],
desc: description,
tel: telephone,
email: email,
web: web
});
link = '';
}

map.panBy(0, 200);

}

google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", function () {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);

});

Answer

Try adding in the !important to the position:fixedproperty. If that does not work then add jquery to set the position to fixed at the bottom of the js file right after the map.panBy(0,200) and also after the map.setCenter(center);

$("#map").css("position","fixed !important");

Hope this helps.