Листовка - Карта не получает выравнивание по центру

Question

Я использую leafletjs для отображения карты. Я не могу зафиксировать карту в центре. Когда i, re размер окна, то карта, кажется, фиксирует себя в центре. Я создал fiddle. Эта проблема возникает в данном конкретном сценарии HTML
Это мой HTML положение и размер

<div id="test">click</div> 
    <div id ="left" style = "width:100px; height:500px; float:left; background-color:red"></div> 
    <div style ="width:100%"> 
     <div style ="width:80%; height:auto"> 
      <div id="list" style = "height:500px;background-color:black"></div> 
      <div id="map" style = "height:500px;display:none"></div> 
     </div> 
    </div> 

Answer 1

карте холста должен быть установлен перед тем карта создана. Скрыть/показать <div> s сначала, а затем создать карту. Изменение порядка createMap(); и $("#map").show();$("#list").hide();.

скрипку: http://jsfiddle.net/e6y5k/