2013-06-05 3 views
1

모달 부트 스트랩으로 googlemap을로드해야합니다. 그러나 정상적으로로드해야하고 콘솔에로드되는지도가 표시되지만 요소 검사가 표시됩니다. 내지도에 사용되는 이미지Google지도가 부트 스트랩 모달로로드되지 않습니다.

 Screenshot of the map container and the result of inspect the container and map variable that show that the map has been loaded

코드처럼 빈지도를로드해야하는 요소는, 난 그냥 모달 외부의지도를 만들려고,

var map; 

var drawingManager; 
var selectedShape; 

function initializeMap() { 
    var mapOptions = { 
     center : new google.maps.LatLng(-16.4237766667, -71.54262), 
     zoom : 15, 
     mapTypeId : google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("mapCanvas"), 
      mapOptions); 
    console.debug(map); 
} 
$(document).ready(
     function() { 
      initializeMap(); 
      $('#createleaf').click(function() { 
       $('#modalFence').modal('show'); 
      }); 
      $('#modalFence').on('shown',function(event) { 
       //console.debug(map); 
       google.maps.event.trigger(map, "resize"); 
       map.setZoom(map.getZoom()); 
       var modal = $(this); 
       modal.css('margin-top',(modal.outerHeight()/2) * -1) 
       .css('margin-left',(modal.outerWidth()/2) * -1); 
       return this; 
      }); 
     }); 

한 가지 더 나는 페이지에서 의미하고, 그것은 잘 실행된다, prob LEM 단지 내 전체 코드는

덕분에 난 그냥 오류를 발견 많은

+0

더 많은 HTML 코드 삽입 또는 JSFiddle에서 재생 – PiLHA

+0

http://pastebin.com에 내 전체 코드를 붙여 넣습니다./2qkMZ93a – Carlos

+0

지도가 크기가 있습니까 (크기 조정 이벤트를 트리거 할 때)? – geocodezip

답변

0

후 너무 오래하지하기 위해 external link에 모달

에, 그것은 typewriting, 나는 나타났습니다되었다 붙여 넣기 저장소에있는 246-256 행에 동일한 ID 맵 컨테이너가있는 모달이 포함되어 있는데 이는 내 모달이지도를 표시하지 않는 이유이며 동일한 ID를 가진 첫 번째 컨테이너에로드되고 있기 때문입니다. 탱크 모두에게 많이

+1

및 페이스트 빈을 제거 하였다 : H –

관련 문제