title: geocomplete map display issue inside Jquery tab
body: <p>I have geocomplete inside a <a href="http://docs.zozoui.com/tabs/#options" rel="nofollow noreferrer">Jquery tab</a>, the map drawing does not show up unless I invoke a change in the page size, changing the window size manually or dragging the console window to left or right!!</p>
  
  <p>This is how I initialize:</p>
  
  <pre><code>jQuery(document).ready(function ($) {
      $(function () {
          $("#autocomplete").geocomplete({
              map: "#map-1",
              details: "form",
              types: ["geocode", "establishment"],
              mapOptions: {
                  //styles: mapStyles
              }
          });
      });
  });
  </code></pre>
  
  <p>I tried using this on tab select but did not work, any idea why is this happening ?</p>
  
  <pre><code>var map = $("#map-1")
  google.maps.event.trigger(map, 'resize');
  </code></pre>
  
  <p>HTML markup</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#autocomplete").geocomplete({
    map: "#map-1",
    details: "form",
    types: ["geocode", "establishment"],
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/geocomplete/1.7.0/jquery.geocomplete.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/geocomplete/1.7.0/jquery.geocomplete.js"&gt;&lt;/script&gt;
  
  &lt;div id="frmMaintab"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a&gt;Patient Info&lt;span&gt;Identifcation Information&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a&gt;Personal Info&lt;span&gt;Demographics&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  
    &lt;/ul&gt;
    &lt;div&gt;
  
      &lt;div&gt;
        content of tab 1
      &lt;/div&gt;
  
      &lt;div&gt;
        &lt;div class="input-group"&gt;
          &lt;span class="input-group-addon"&gt;
                                                              &lt;i class="fa fa-map-marker"&gt;&lt;/i&gt;
                                                          &lt;/span&gt;
          &lt;input id="autocomplete" placeholder="Contact Address" type="text" class="form-control"&gt;
        &lt;/div&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-12"&gt;
            &lt;section class="panel"&gt;
              &lt;div class="panel-body"&gt;
  
                &lt;div class="map-container"&gt;
                  &lt;div class="map-area" id="map-1"&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/section&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
    &lt;script src="https://maps.googleapis.com/maps/api/js??key=AIzaSyCTUe4qO5LRKfzTErUSWSbnTCqJ1e-ODqc&amp;libraries=places"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>