title: Google Place Autocomplete not showing in Bootstrap modal
body: <p>FIX UPDATE:
  It seems that the way i was initializing the box was causing issues
  here is what fixed it</p>
  
  <pre><code> &lt;script&gt;
      $(function () {
          var input = document.getElementById("keyword");
          var autocomplete = new google.maps.places.Autocomplete(input);
  
          $('#my-modal').modal('show');
  
      });
  
  &lt;/script&gt;
  &lt;style&gt;
      .pac-container {
          z-index: 10000 !important;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>UPDATE: I have updated the code to be very simple, the reason this <a href="http://jsfiddle.net/g8vxmLn9/1/" rel="noreferrer">http://jsfiddle.net/g8vxmLn9/1/</a>  works is because its using older bootstrap and jquery so I assume because I am using newer i am having the problems.</p>
  
  <p>I simply just want to show a autocomplete box in a bootstrap(3.3) model and have it show the results as you type.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="width=device-width" /&gt;
  &lt;title&gt;Test&lt;/title&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"&gt;
  &lt;script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://maps.googleapis.com/maps/api/js?libraries=places"&gt;   &lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div&gt;
      &lt;div id="my-modal" class="modal" aria-hidden="true"&gt;
          &lt;div class="modal-dialog"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;input name="keyword" id="keyword" type="text" /&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
      $(function () {
          $("#my-modal").modal({
              show: false
          }).on("shown", function () {
              var input = document.getElementById("keyword");
              var autocomplete = new google.maps.places.Autocomplete(input);
  
          });
          $('#my-modal').modal('show');
      });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>