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

Question

我使用3个步骤创建了一个表单并且我已经放置了jQuery位置选取器第3步内的地图，但是在起始位置，它将被隐藏。

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可见后运行：google.maps.event.trigger(map, 'resize');