Карты Google не отображают всю карту в контейнере div

Question

У меня есть div с картой google внутри, но карта не отображается полностью .. просто показывает часть карты, а другая - все серые, и если я перемещаю карту с помощью курсора визуальная часть карты перемещается отлично, но размер изменяется, но не принимает весь размер div.

Это ДИВ и снимок:

<div style="height: 275px; width: 715px;" id="map_display"></div> 

Answer 1

Вам нужно вызвать событие изменения размера в Google картах как

google.maps.event.trigger(myMap, 'resize'); 

После инициализации Google карты

Answer 2

Ответ предоставлен Here может быть вам полезен , вероятно, проблема заключается в том, что карта была загружена до калибровки div (возможно, она имеет динамический размер?).

Загрузка карты после того, как остальные элементы страницы должны помочь.

Answer 3

Working Fiddle

function InitializeMap() { 
    var latlng = new google.maps.LatLng(-34.397, 150.644); 
    var myOptions = { 
     zoom: 8, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_display"), myOptions); 
} 
$(document).ready(function() { 
    InitializeMap(); 
});