Google Maps automatisch setzt Position: relativ von #map div

Question

Ich habe ein seltsames Problem oder zumindest für mich ist es irgendwie seltsam. Wenn ich mein #map div style und die Position fixiere (da ich es als Hintergrund brauche), wird die Position automatisch relativiert und überschreibt meine Einstellungen. Ich konnte nicht herausfinden, wo ich dieses Verhalten ändern sollte.

Die Elternklasse:

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

und die #map

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

Code ist einfach:

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

Nun, wenn ich die Seite geben Sie macht zunächst gut und nach einer milisec die anwendung der js ich nehme an das #map div hat diese linien hinzugefügt

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

gut, wenn ich es manuell ändere, tut es genau, was ich will, aber ich kann diese Überschreibung nicht deaktivieren. Hat jemand anderes so etwas erfahren? Ich bin irgendwie steckengeblieben.

Im usign Chrome.

Vielen Dank im Voraus für Ihre Zeit! Grüße

JS-Datei:

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 1

Versuchen in der Zugabe wichtig für die position:fixed Eigenschaft!. Wenn das nicht funktioniert, dann jquery fügen Sie die Position fest auf dem Boden der JS-Datei direkt nach den map.panBy(0,200) zu setzen und auch nach der map.setCenter(center);

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

Hoffnung, das hilft.