Jquery选项卡

Question

我在Jquery tab内部进行了地理填充，除非我调用页面大小的更改，手动更改窗口大小或向左或向右拖动控制台窗口，否则地图绘图不会显示！

这是我初始化的方式：

jQuery(document).ready(function ($) {
    $(function () {
        $("#autocomplete").geocomplete({
            map: "#map-1",
            details: "form",
            types: ["geocode", "establishment"],
            mapOptions: {
                //styles: mapStyles
            }
        });
    });
});

我尝试在选项卡上使用此选项但不起作用，任何想法为什么会发生这种情况？

var map = $("#map-1")
google.maps.event.trigger(map, 'resize');

HTML标记

$("#autocomplete").geocomplete({
  map: "#map-1",
  details: "form",
  types: ["geocode", "establishment"],

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/geocomplete/1.7.0/jquery.geocomplete.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/geocomplete/1.7.0/jquery.geocomplete.js"></script>

<div id="frmMaintab">
  <ul>
    <li><a>Patient Info<span>Identifcation Information</span></a></li>
    <li><a>Personal Info<span>Demographics</span></a></li>

  </ul>
  <div>

    <div>
      content of tab 1
    </div>

    <div>
      <div class="input-group">
        <span class="input-group-addon">
                                                            <i class="fa fa-map-marker"></i>
                                                        </span>
        <input id="autocomplete" placeholder="Contact Address" type="text" class="form-control">
      </div>
      <div class="row">
        <div class="col-md-12">
          <section class="panel">
            <div class="panel-body">

              <div class="map-container">
                <div class="map-area" id="map-1">
                </div>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>

  </div>
  <script src="https://maps.googleapis.com/maps/api/js??key=AIzaSyCTUe4qO5LRKfzTErUSWSbnTCqJ1e-ODqc&libraries=places"></script>