Javascript jQuery位置选择器Google地图显示内部切换表单时显示灰色区域

我正在创建一个包含3个步骤的表单，我已将jquery位置选择器映射放置在第3步中，但在开始时，它将被隐藏

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

但是，地图和位置选择器可以在没有步骤的正常形式下正常工作

这是我使用的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>

---

隐藏的div可能返回0宽度。仅当div可见（具有宽度）时，才尝试运行映射代码。或者，在div可见后运行此命令：

google.maps.event.trigger（map'resize'）
我正在使用插件，当我使用此代码时，我遇到了一个错误。您在问题中没有提到这一点。上面的代码假设了一个标准的map集成。我认为你仍然需要加载地图分区，一旦它是可见的。或者调用链接模式部分中使用小部件中定义的“autosize”方法。您好，sideroxylon，我已更正了我的问题，请您再次检查。您是否根据文档，在div可见后尝试调用
autosize
？请提供一个示例来说明问题（图片对调试代码不是很有用…）嗨，geocodezip，我已经编辑了我的问题，请看一看。请提供问题本身，而不是（仅仅）指向外部站点的链接。何时/何地调用发布的代码？如果在DOM中呈现
之前调用它，它将不会做任何有用的事情。地图容器div隐藏时，其宽度和高度为零。
$('#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
            });