刷新谷歌地图在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多个步骤形式

回答

相关问题