jQuery UI 탭 내에서 google maps가 작동하지 않습니다.

Google Maps 용 javascript API를 사용하고 있습니다. 그것은, 난 그냥 아주 간단이있어 :
헤더jQuery UI 탭 내에서 google maps가 작동하지 않습니다.

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
     <script type="text/javascript"> 
      function initialize() { 
      var myLatlng = new google.maps.LatLng(<?php echo $get_music_spot['music_spot_lat'].', '.$get_music_spot['music_spot_lng']; ?>); 
      var myOptions = { 
       zoom: 14, 
       center: myLatlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      } 
      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

      var marker = new google.maps.Marker({ 
       position: myLatlng, 
       map: map, 
       title:"<?php echo $get_music_spot['music_spot_title']; ?>" 
      }); 
      } 
</script>

, 나는 실제로지도를 호출하기 위해 몸에 <div style="width:600px; height:500px; float:left;" id="map_canvas"></div> 있습니다. 그럼 물론 내가 가지고있다 <body onLoad="initialize()"> 이것은 기본적으로 기본지도에 필요한 전부입니다. 하지만 jQuery 내부에 있기 때문에 그것이 jQuery UI 탭을 헤이 와이어로 간다. 당신은지도의 조각이 왼쪽 상단 모서리에 표시되는 것을 볼 수 있습니다

enter image description here

: 여기에 스크린 샷입니다. 왜 이런 일이 일어나고 어떻게 해결할 수 있을까요? iFrame을 기본 포함으로 구현했지만 Internet Explorer에서는 작동하지 않습니다.

출처

2012-03-18 Graham

왜 작동하지 않는지 이유는 말할 수 없습니다. 그러나 jQuery Tabs 위젯에서 이벤트 중 하나를 사용하여 show 또는 select 이벤트와 같이지도를 초기화하십시오.

$('#myTabs').tabs({ 
    show: function(event, ui){ 

     // check if is "mappanel" and "map" is empty 
     if (ui.panel.id == 'mappanel' && $('#map').is(':empty')) 
     { 
      // load map 
      var myOptions = { 
       center: new google.maps.LatLng(-34.397, 150.644), 
       zoom: 8, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      var map = new google.maps.Map(document.getElementById("map"), myOptions);  
     } 
    }      
});

이지도는지도 탭 (또는 다른 탭)가 선택 될 때마다 다시로드되지 않도록 거기에 체크를 포함하는 것이 중요합니다.

이 부분은 현재 jsFiddle에서 작동합니다.

출처

2012-03-18 06:06:38

이 심지어 JQuery와 - UI의 사이트에 설명되어 있습니다 : http://jqueryui.com/demos/tabs/#...my_slider.2C_Google_Map.2C_sIFR_etc._not_work_when_placed_in_a_hidden_.28inactive.29_tab.3F – DCoder

아, 그래서입니다. 흥미로운 오프 - 레프트 기법. 건배. –

jQuery UI 탭 내에서 google maps가 작동하지 않습니다.

답변

관련 문제