jQuery位置选择器Google地图在显示内部切换形式时显示灰色区域

Question

我正在创建一个包含3个步骤的表单，并且我在第3步中放置了 jquery位置选择器映射，但是在启动时，它将被隐藏。

Here is the link to the javascript

here is the link to the page having issue:

但是当用户单击下一步按钮时，通过更改样式中的显示属性进入下一步。但是当我们到达有这张地图的步骤时，得到一个空白的灰色屏幕，但当我检查有地图的部分时，突然恢复正常。我尝试了不同的方法，例如在下一个按钮操作中重新初始化地图，使用谷歌地图javascript中的回调函数重新初始化。但没有任何结果。

但是地图和位置选择器在没有步骤的情况下可以正常使用。

这是我用过的HTML代码： -

<div class="form-group">
    <div id="address_location" style="width: 500px; height: 400px;"></div>
    <input type="text" class="form-control" id="address_location_input" placeholder="Location" name="address_location" >
    <input type="hidden" class="form-control" id="location_lat" name="location_lat">
    <input type="hidden" class="form-control" id="location_long" name="location_long">
</div>

这是我用过的javascript。

$('#address_location').locationpicker({
            location: {latitude:0 , longitude:0},   
            radius: 300,
            zoom: 15,
            enableAutocompleteBlur: false,                  
            inputBinding: {
            latitudeInput: $('#location_lat'),
            longitudeInput:$('#location_long'),
            radiusInput: $('#us2-radius'),
            locationNameInput: $('#address_location_input')
            },
            enableAutocomplete: true
            }); 

Answer 1

隐藏的div很可能返回0宽度。只有在div可见（有宽度）后才尝试运行地图代码。或者，在div显示后运行此命令：android:textSize