AJAX 탭을 사용하여지도 전환 - Google Maps API

Question

Google Maps API v3 JS 코드를 사용하여 Google지도를 설정하려고합니다. 원본 페이지를 다시로드하지 않고도 AJAXed 페이지를 열었을 때 여러 개의 탭이 있습니다. 각 탭 콘텐츠에는지도가 포함되어 있습니다. 다음은지도 설정 방법에 대한 예입니다. 목록 요소는 여기에 불과하며 각 탭에는 다른 위치에있는 많은 항목이 포함되어 있습니다.

<script type="text/javascript"> 
var locations = new Array(); 
</script> 
<div id="googlemap"><div>Loading..</div></div> 
<ul> 
    <li>#1 - My Place, Euless, TX 
    <script type="text/javascript"> 
     locations.push(['#1 - My Place','Euless, TX']); 
    </script> 
    </li> 
    <li>#2 - My Other Place, Dallas, TX 
    <script type="text/javascript"> 
     locations.push(['#2 - My Other Place','Dallas, TX']); 
    </script> 
    </li> 
</ul> 
<script type="text/javascript"> 
jQuery(document).ready(function(){ 
    jQuery('#googlemap div').remove(); 
    if(locations.length>0) 
    { 
     var map = new google.maps.Map(document.getElementById('googlemap'), { 
      zoom: 3, 
      center: new google.maps.LatLng(38.065392,-97.382812), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 
     var infowindow = new google.maps.InfoWindow(); 
     var marker, i; 
     for (i=0;i<locations.length;i++) { 
      var thelocation = locations[i]; 
      jQuery.ajax({ 
       dataType: 'jsonp', 
       url: 'http://maps.google.com/maps/geo?output=json&oe=utf8&sensor=false&key=BLAHBLAH&q='+thelocation[1], 
       cache: false, 
       success: function(data){ 
        if(data.Status.code==200) 
         { 
          marker = new google.maps.Marker({ 
           position: new google.maps.LatLng(data.Placemark[0].Point.coordinates[1],data.Placemark[0].Point.coordinates[0]), 
           map: map 
          }); 
          google.maps.event.addListener(marker, 'click', (function(marker, i) { 
           return function() { 
            infowindow.setContent(thelocation[0]); 
            infowindow.open(map, marker); 
           } 
          })(marker, i)); 
         } 
       } 
      }); 
     } 
    } 
}); 
</script> 

현재 이전지도를 삭제하고 새지도에서로드하는 데 많은 문제가 있습니다. 탭이있는 내용이로드되면지도 요소가 위로 이동하고 왼쪽으로 이동합니다. Google지도 UI는 여전히 올바른 지점에 표시되지만지도 콘텐츠 자체는 위로/왼쪽으로 이동합니다. 지도를 드래그하면 특정 지점까지 약간 움직이며 그 지점에서 가시 영역은 동일한 동일한 영역으로 다시 클리핑됩니다. 누구든지 AJAX를 통해 새로운 맵을로드하는 것을 도와 줄 수 있습니까?

Answer 1

맵의 크기 변경 이벤트에 DIV 크기 변경을 연결하기위한 트리거를 만들어야합니다. google.maps.event.trigger (지도 '크기 조정') : div 크기가 변경되면

개발자는지도에이 이벤트 를 트리거합니다.