Почему некоректно отображаются карты Google Map?

Question

[Max]

Здравствуйте, скажите пожалуйста почему может быть такой вот серый фон у крат Google map?
Блок где выводиться карта:

<div id="map_canvas" style="width: 800px; height: 100%;"></div>

И скрипт:

function initialize_map( ) {
     var latlng = new google.maps.LatLng(49.25100320801442,28.541126489672024);
     var myOptions = {
     zoom: 18,
     center: latlng,
     mapTypeId: google.maps.MapTypeId.ROADMAP
     };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var polygonCoords = [
   	  new google.maps.LatLng(49.25156346163994,28.542151093515713),
   	  new google.maps.LatLng(49.25113626882619,28.542376399072964),
   	  new google.maps.LatLng(49.25074759018555,28.541657567056973),
   	  new google.maps.LatLng(49.25076509829823,28.54119622710641),
   	  new google.maps.LatLng(49.25100320801442,28.541126489672024)
   	 ];
   	 var polygon = new google.maps.Polygon({
   	  path: polygonCoords,
   	  strokeColor: "#5196DB",
   	  strokeOpacity: 1,
   	  strokeWeight: 2,
   	  fillColor: "#8ab9e7",
   	  fillOpacity: 0.5
   	 });
   	 polygon.setMap(map);   
   	 return map;
   }

Стили карты:

#modal_form {
  	width: 800px;
  	height: 800px;
  	background: #fff;
  	position: absolute;
  	z-index: 5;
  	padding: 0px 0px;
  	padding-top:45px;
  	bottom:40px;
  	top: 80px;
  	margin-left: 30%;
}
#modal_form #modal_close {
	width: 21px;
	height: 21px;
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
	display: block;
}

Answer 1

[Mikhail Osher]

1) Проверьте, чтобы не было стилей, связанных img в пределах контейнера с картой. натыкались на такие грабли.
2) Задайте фиксированную высоту блоку.
3) Перерисуйте карту. А так же, всегда вызывайте этот метод при изменении размеров окна (window resize).

google.maps.event.trigger(MapInstance,'resize')

Answer 2

[Евгений Петров]

А вы проверьте высоту блока. Хоть с помощью средств браузера, хоть в скрипте поставьте

console.log(document.getElementById('map_canvas').offsetHeight);

Update: Поставьте инициализацию после построения DOM

document.addEventListener('DOMContentLoaded', initialize_map);

Comments

[Max]

Пишет 800 px. Когда я обновляю страницу и нажимаю на карту то она отображается с серым фоном, но если я нажму F12 например то сразу стает нормально отображаться.

[Евгений Петров]

Максим Череватов: Когда пишет? После построения карты? Или после.

[Max]

Евгений Петров: до того как я вызываю карту пишет ноль. Когда вызываю пишет 800. Но это я в ручную задал мап_канвас 800пх

[Max]

Евгений Петров: ещё одна странность, если я в # modal_form убираю display:none, то карта сразу есть на странице, и отображается уже нормально)

[Евгений Петров]

Максим Череватов: Ну так очевидно же, что вы инициализируете карту до отрисовки блока.
Достаточно дождаться окончания построения DOM — событие DOMContentLoaded в документе или $() в jQuery.

[Евгений Петров]

Максим Череватов: Если вы строите карту в момент, когда блок скрыт, решение написал Mikhail Osher — вызывайте событие изменения размеров карты.

[Max]

Евгений Петров: я пока очень слаб в js) Можете если не трудно написать где и как вызвать DOMContentLoaded . Сначала карта скрыта но когда я нажимаю на кнопку она появляется. Вот мой код) jsfiddle.net/1sfz8r38/1

[Max]

Решил Проблему немного другим путем. При генерации модального окна просто добавил initialize_map(); )

Answer 3

[vovastradamus]

Я сам себе уже отвечал на подобный вопрос. Все из-за того, что карты загружаются при формировании страницы, и размер ставится меньше, потому карту нужно еще раз инициализировать.
Куски карты гугл в левом верхнем углу. Как отобразить карту на весь блок?