title: why initAutocomplete function is not hitting for search place in google map
body: <p>I want to implement a search box in my webpage which includes a fullscreen map. I followed this link <a href="https://developers.google.com/maps/documentation/javascript/examples/places-searchbox" rel="nofollow noreferrer">https://developers.google.com/maps/documentation/javascript/examples/places-searchbox</a> and I did some code changes like below </p>
  
  <p>I added this line of code in header</p>
  
  <pre><code>  &lt;script src="https://maps.googleapis.com/maps/api/js?key=...&amp;libraries=places&amp;callback=initAutocomplete"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>and html like this </p>
  
  <pre><code>&lt;div id="map-container2" class=""&gt;
   &lt;input id="pac-input" class="controls" type="text" placeholder="Ville - Recherche"&gt;
   &lt;div id="map" class="map2"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and I added this function to my javascript</p>
  
  <pre><code>$(document).ready(function () {
  
  
      function initAutocomplete() {
          var map = new google.maps.Map(document.getElementById('map'), {
  
          });
  
          // Create the search box and link it to the UI element.
          var input = document.getElementById('pac-input');
          alert(input);
          var searchBox = new google.maps.places.SearchBox(input);
          alert(searchBox);
          map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
          alert("1");
  
          // Bias the SearchBox results towards current map's viewport.
          map.addListener('bounds_changed', function () {
              searchBox.setBounds(map.getBounds());
          });
  
      }
  
  });
  </code></pre>
  
  <p>the problem  is that although I define <code>callback=initAutocomplete</code> in script tag, but it never hits this function. alerts whithin this functions never calls. 
  I really appreciate any help. 
  Thank you </p>