Google지도가 숨겨진 탭을 클릭하면 부분적으로로드됩니다.

Question

두 번째 탭을 사용하여 목록을 표시하고 다른지도를 표시합니다. 처음 페이지가로드 될 때 기본적으로 1 탭이 표시되고 두 번째 탭 맵 클릭시 표시되지만 목록 탭을 클릭하고 부분적으로 맵 탭 맵로드를 다시 클릭 할 때. 내가 좋아하는 몇 가지 솔루션 시도

$(document).on('click', "#load-map-view", function() { 
     locateStores(); 
     $("#store-list-view").hide(); 
     $("#store-list-view").removeClass('disabled'); 

     $("#store-map-view").show(); 
     $("#store-map-view").addClass('disabled'); 
    }); 

function locateStores() { 
    var mapContent; 
    var map = new google.maps.Map(document.getElementById("store-map-view"), { 
     center: new google.maps.LatLng(47.6145, -122.3418), 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     zoom: 13 
    }); 
    var markers = []; 
    $("#store-list-view .listed-shop").each(function() { 
     markers.push({ 
      lat: $(this).attr('data-lat'), 
      lng: $(this).attr('data-lan'), 
      name: $.trim($(this).find('div.shop-name').text()) 
     }); 
    }); 
for (index in markers) 
     addMarker(markers[index]); 
    function addMarker(data) { 


     var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(data.lat, data.lng), 
      map: map, 
      title: data.name 
     }); 

     var infobox = new InfoBox({ 
      content: document.getElementById("infobox"), 
      disableAutoPan: false, 
      maxWidth: 150, 
      pixelOffset: new google.maps.Size(-140, -10), 
      zIndex: null, 
      boxStyle: { 
       background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat", 
       opacity: 0.80, 
       width: "400px"//"280px" 
      }, 
      closeBoxMargin: "12px 4px 2px 2px", 
      closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif", 
      infoBoxClearance: new google.maps.Size(1, 1) 
     }); 

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

     google.maps.event.addListener(marker, 'click', function() { 
      $(".infoBox").fadeOut(300); 
      infobox.open(map, this); 
      map.panTo(new google.maps.LatLng(47.6145, -122.3418)); 
     }); 
    } 

    var bounds = new google.maps.LatLngBounds(); 
    for (index in markers) { 
     var data = markers[index]; 
     bounds.extend(new google.maps.LatLng(data.lat, data.lng)); 
    } 
    map.fitBounds(bounds); 

var pin = new google.maps.MVCObject(); 
    function openInfoWindow(marker) { 
     title.innerHTML = marker.getTitle(); 
     pin.set("position", marker.getPosition()); 
     infowindow.open(map, marker); 
    } 
} 

:이 코드

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

및 다른 많은 솔루션을 추가 을, 그러나 아직도 여전히 페이지가 로딩되지

여기 내 자바 스크립트 코드입니다.

누군가 나를 도와 줄 수 있습니까?

Answer 1

내가 얻은 문제점을 파악했습니다.

내가 잘못된 위치에 코드 아래에 추가되었습니다

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

내 문제에 대한 해결책은 다음과 같습니다

당신은 숨겨진 사업부에 대한지도를 사용하는 경우. 전역으로 맵 변수를 선언하십시오.

그런 다음 먼저 div를 표시하고 div가 표시된 후지도를로드하고 제공된 코드를 사용하여 크기를 조정하십시오.

var map; //globalize your map variable 
      // Then do the necessary loading 

    $(document).on('click', "#load-map-view", function() { 
      $("#store-list-view").hide(); 
      $("#store-list-view").removeClass('disabled'); 

      locateStores(); 
      google.maps.event.trigger(map, "resize"); 
    $("#store-map-view").show(); 
      $("#store-map-view").addClass('disabled'); 
     });