刷新谷歌地圖在jquery多個步驟形式

我有一個jQuery的形式與多個步驟，第二步我想把谷歌地圖div。現在這個GMAP div不起作用，只是部分顯示。我在Bootstrap選項卡上閱讀了許多關於refreshig map的問題，但我不知道如何將它應用於我的案例。刷新谷歌地圖在jquery多個步驟形式

我試過這個代碼

HTML

<fieldset> <!--step 1--> 
some inputs 
<input type="button" name="next" class="refresh next action-button" value="Next" /> 
</fieldset> 
<fieldset> <!--step 2--> 
<div id="maphome"></div> <!-- NOT LOADING THE MAP --> 
<input type="button" name="previous" class="previous" value="Previous" /> 
<input type="button" name="next" class="next action-button" value="Next" /> 
</fieldset>

的jQuery/JS（我試過）

var addressPicker = new AddressPicker({ 
    map: { 
     id: '#maphome', 
     styles: <?php echo $map_style; ?> 
    } 
}); 

// instantiate the typeahead UI 

$('#address').typeahead(null, { 
    displayKey: 'description', 
    source: addressPicker.ttAdapter() 
}); 

// Bind some event to update map on autocomplete selection 

$('#address').bind('typeahead:selected', addressPicker.updateMap); 
$('#address').bind('typeahead:cursorchanged', addressPicker.updateMap); 

//This is not refreshing 

$('.refresh').on('click', function() { 
    setTimeout(function(){ 
     google.maps.event.trigger(map, 'resize'); 
    }, 50); 
});

你能幫助我嗎？提前致謝。

來源

2016-04-13 XiLab

Google地圖無法在隱藏元素上初始化。你什麼時候初始化地圖？ – DvS

哦，這個問題出現了輸入錯誤。

實際上是

，它被初始化爲AddressPicker函數。 – XiLab

有人可以幫助我嗎？謝謝 – XiLab

嘗試在#maphome中添加一個高度級別，如果您還沒有一個高度級別的話。

來源

2016-04-13 15:52:23 ERushforth

mmm，它已經在300px。我確實看到了Google徽標，但地圖全是灰色的...... @ERushforth – XiLab

刷新谷歌地圖在jquery多個步驟形式

回答

相關問題