jQuery位置選取器Google地圖在顯示內部切換表單時顯示灰色區域

Question

我使用3個步驟創建了一個表單並且我已經放置了jQuery位置選取器第3步內的地圖，但是在起始位置，它將被隱藏。

Here is the link to the javascript

here is the link to the page having issue:

但是當用戶點擊下一步按鈕將變成由在風格改變顯示屬性的下一個步驟。但是當我們到達擁有這張地圖的那一步時，會看到一個空白的灰色屏幕，但是當我檢查具有地圖的部分時，突然恢復正常。我嘗試過不同的方法，如在下一個按鈕操作中重新初始化地圖，使用谷歌地圖javascript中的回調函數重新初始化。但沒有什麼可以解決的。

但地圖和位置選取器正常工作正常形式沒有步驟。

這是HTML代碼我已經使用： -

<div class="form-group"> 
    <div id="address_location" style="width: 500px; height: 400px;"></div> 
    <input type="text" class="form-control" id="address_location_input" placeholder="Location" name="address_location" > 
    <input type="hidden" class="form-control" id="location_lat" name="location_lat"> 
    <input type="hidden" class="form-control" id="location_long" name="location_long"> 
</div> 

這是我使用的JavaScript。

$('#address_location').locationpicker({ 
      location: {latitude:0 , longitude:0}, 
      radius: 300, 
      zoom: 15, 
      enableAutocompleteBlur: false,     
      inputBinding: { 
      latitudeInput: $('#location_lat'), 
      longitudeInput:$('#location_long'), 
      radiusInput: $('#us2-radius'), 
      locationNameInput: $('#address_location_input') 
      }, 
      enableAutocomplete: true 
      }); 

Answer 1

隱藏的div很可能返回0寬度。只有在div可見（有寬度）時才嘗試運行地圖代碼。或者，在div可見後運行：google.maps.event.trigger(map, 'resize');