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

Question

我有一个包含多个步骤的 Jquery 表单，第二步我想放置一个谷歌地图 div。 现在这个 GMAP div 不起作用，只是部分显示。我在 Bootstrap 选项卡中阅读了许多关于 refreshig 地图的问题，但我不知道如何将其应用于我的案例。

我已尝试使用此代码

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

你能帮帮我吗？提前致谢。

Answer 1

如果您还没有高度等级，请尝试向#maphome 添加高度等级。