Question

我有一个Jquery表单有多步，第二步我想放一个谷歌地图div。现在这个GMAP div没有工作，只是部分显示。我在Bootstrap选项卡中读过很多关于refreshig map的问题，但我不知道如何将它应用于我的案例。

我尝试过这段代码

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。

在Jquery Multiple Step Form中刷新Google地图

1 个答案: