谷歌地圖加載部分點擊隱藏標籤

Question

我使用2個標籤，第一個顯示列表和另一個顯示地圖。 加載第一次頁面時默認顯示1個選項卡，並顯示第二個選項卡地圖的點擊，但是當我單擊列表選項卡並再次單擊地圖選項卡地圖加載部分。

這裏是我的JavaScript代碼：

$(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'); 
     });