Google지도에서 위치를 자동으로 설정합니다. #map div의 상대방

Question

이상한 문제가 있거나 적어도 이상한 점이 있습니다. 내 #map div 스타일 및 위치 : 고정 (배경으로 필요하기 때문에) 자동으로 상대 위치로 설정하고 내 설정을 재정의합니다. 나는이 행동을 어디에서 바꿀지 생각할 수 없었다.

부모 클래스 : 이제

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

내가 페이지를 입력 할 때 먼저 잘하고 후 렌더링 :

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

과 #map

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

코드는 간단하다 milisec js의 적용 #map div에 다음 줄이 있다고 가정합니다.

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

잘 수동으로 변경하면 정확히 원하는대로 수행되지만이 무시는 사용하지 않습니다. 다른 사람이 이런 일을 준다고? 나는 좀 붙어있다.

Im use 크롬.

미리 감사드립니다. 감사

JS 파일 다음에 추가

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

시도 position:fixed 재산 중요!. 그 다음 일을 바로 map.panBy(0,200) 후이가 도움이 map.setCenter(center);

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

희망 후에 JS 파일의 하단에 고정으로 위치를 설정하기 위해 jQuery를 추가하지 않습니다.