Неверное отображение карты google

Question

Я создаю представление с картой google в нем, когда запускается определенный клик из события элемента li. Впервые карта отображается в порядке. И результат:

http://postimg.org/image/eolnn0411/

, но когда я нажимаю на другой Li элемент, чтобы создать новую карту показано, как это:

http://postimg.org/image/576um203l/

Я заметил странное поведение, что если я изменил размер окна браузера, карта превратится в режим ОК после в.

Я использую следующий код:

var latlng = new google.maps.LatLng(coordinates[0], coordinates[1]); 
var myOptions = { 
      zoom: 16, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

var map; 
map = new google.maps.Map(node, myOptions); 

var marker = new google.maps.Marker({ 
      map: map, 
      position: latlng 
     }); 

Edit: Похожие сообщения here и here.

Редактировать 2: Используя обходной путь использования setInterval(), работает иногда. Так кажется, что проблема заключается в том, что карта не готова к событию.

Answer 1

Попробуйте вызвать Google maps (v3) изменить размер события.

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

Этот fiddle поможет вам найти разницу.