google maps api full screen

Question

Привет, я работаю над проектом, для которого требуется определенная полноэкранная карта Google, чтобы сидеть между верхним и нижним колонтитулом. Я уверен, что ответ довольно прост, но я думал, что все равно спрошу. Проект состоит из формы, в которой пользователи могут отбрасывать маркеры, как только они заполняют свой адрес и т. Д., Не уверены, что какая-либо настройка может помешать или что-то еще ...

Когда я работал с API-интерфейсом google в прошлом я обычно менял бы высоту css до 100%, но по какой-то причине вместо изменения размера он полностью удаляет карту.

#map { 
height:500px; 
width:1200px; 
} 

Вот код.

var map; 
var marker; 
var Longitude = -1.8822221000000354; 
var Latitude = 50.72569620000001; 
var zoom = 20; 
var bounds = new google.maps.LatLngBounds(); 
var markers; 
var new_marker; 
var C; 
var popupbubblepath = <%= this.popupbubble.ToString() %>; 
var infowindow = new google.maps.InfoWindow(); 
var ib; 

function LoadMap() { 

    // Create an array of styles. 
    var styles = [ 
     { 
      stylers: [ 
       { saturation: -100 }, { lightness: -100 } 
      ] 
     },{ 
      featureType: "all", 
      elementType: "all", 

     } 
    ]; 

    // Create a new StyledMapType object, passing it the array of styles, 
    // as well as the name to be displayed on the map type control. 
    //var styledMap = new google.maps.StyledMapType(styles, {name: "Styled Map"}); 

    var myOptions = { 
     zoom: zoom, 
     center: new google.maps.LatLng(Latitude, Longitude), 
     mapTypeControl: false, 
     scaleControl: false, 
     streetViewControl: true, 
     overviewMapControl: false, 
     zoomControl: true, 
     mapTypeControlOptions: { 
      style:google.maps.MapTypeControlStyle.DROPDOWN_MENU, 
      position:google.maps.ControlPosition.LEFT_BOTTOM 
     }, 
     zoomControlOptions: { 
      style: google.maps.ZoomControlStyle.SMALL 
     }, 
     panControl: false, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 

    map = new google.maps.Map(document.getElementById("map"), myOptions); 

Answer 1

Проблема с вашим html не с вашим javascript. попробуйте следовать

<div id='wrapper'> 
    <div id='header'>header stuff<div> 
    <div id='map-canvas'></div> 
    <div id='footer'>footer stuff<div> 
</div> 

Добавьте следующий CSS

html, body, #wrapper{ 
    height: 100%; 
    width: 100%; 
} 
#header{ 
    height: 100px; //or whatever. Note px not %. 
    width: 100%; 
} 
#footer{ 
    height: 100px; //or whatever. Note px not %. 
    width: 100%; 
} 
#map-canvas{ 
    height: 100%; 
    width: 100%; 
    margin-top: 100px; 
    margin-bottom: 100px; 

} 

я не получил шанс испытать это еще, но это должно дать вам представление о том, что должно быть сделано.

Answer 2

Я думаю, что проблема заключается не в карте, а в том, что содержит div. Если вы установите высоту div на 100%, убедитесь, что все содержащие div имеют определенную высоту. Вы можете сказать, если это проблема, поместив границу вокруг div, вы можете увидеть, что высота является проблемой.

Было бы легче исправить ситуацию, если вы можете получить ее для нас, чтобы играть.

Answer 3

Если вы хотите иметь пустой div, что взять все на экран в высоту, вы должны определить значение min-height, как показано ниже:

html, body { 
    height: 100%; 
} 

#map { 
    min-height: 100%; 
} 

Но опять-таки, что это на самом деле не связан с «Google-карты -api-3 '...

Answer 4

Посмотрите здесь http://alistapart.com/article/conflictingabsolutepositions, используя абсолютное позиционирование с настройкой сверху, влево, снизу, справа vaules.

#map-canvas{ 
    position: absolute; 
    top: 100px; 
    left: 0; 
    bottom: 100px; 
    right: 0; 
} 

Теперь перетащите свое окно в свое сердце и посмотрите, как ваша карта останется в полном размере. Отлично, когда вы тоже делаете отзывчивые проекты.

Answer 5

В API Docs Google Maps explain this effect rather neatly:

Обратите внимание, что некоторые CSS, который работает в режиме совместимости не действует в стандартном режиме. В частности, все процентные размеры должны наследоваться от родительских элементов блока, и если какой-либо из этих предков не может указать размер, предполагается, что они имеют размер 0 х 0 пикселей.