在Jquery多步骤表单中刷新谷歌地图

Refresh Google map in Jquery Multiple Step Form

本文关键字：刷新 谷歌地图 表单 Jquery      更新时间：2024-06-24

我有一个Jquery表单，有多个步骤，第二步我想放一个谷歌地图div。现在这个GMAPdiv没有工作，只是部分显示出来。我在Bootstrap标签中读到了很多关于刷新地图的问题，但我不知道如何将其应用于我的案例。

我试过这个代码

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);
});

你能帮我吗？提前谢谢。

如果您还没有高度类，请尝试在#maphome中添加一个高度类。

相关文章：