title: Google Place Automplete box doesn't display anything
body: <p>I'm trying to implement a <a href="https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete?hl=FR" rel="nofollow noreferrer">Google places Autocomplete</a> field on my website, but it doesn't work. I tried to copy/paste the sample given by Google on a <em>.html</em> file, it perfectly works, like other samples found on the web, like <a href="https://stackoverflow.com/questions/21460723/google-places-autocomplete-with-marker">this one</a> So I probably make a mistake on my project (ASP.NET MVC), but I don't know where...</p>
  
  <p>Here is what I've done :</p>
  
  <pre><code>//Loading places library
  &lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=places"&gt;&lt;/script&gt;
  
  $(document).ready(function () {
      initialize();
  
      //Some other asynchronous methods loading some partial views, but with no rapport with Google Maps
  }
  
  function initialize() {
      var myOptions = { /*various options*/ };
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
      //4 next lines are given by Autocomplete doc
      var input = document.getElementById('pac-input');
      map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
      var autocomplete = new google.maps.places.Autocomplete(input);
      autocomplete.bindTo('bounds', map);
  
      /* Implementation of other tools, like 
       * DrawingManager
       * MarkerClusterer
       * and OverlappingMarkerSpiderfier 
       */
  
       //This event is given by google
       google.maps.event.addListener(autocomplete, 'place_changed', function() {
          console.log("place_changed"); // Never goes here
          var place = autocomplete.getPlace();
          if (!place.geometry) {
              return;
          }
  
          // If the place has a geometry, then present it on a map.
          if (place.geometry.viewport) {
              map.fitBounds(place.geometry.viewport);
          } else {
              map.setCenter(place.geometry.location);
              map.setZoom(17);  // Why 17? Because it looks good.
          }
          var address = '';
          if (place.address_components) {
              address = [
                (place.address_components[0] &amp;&amp; place.address_components[0].short_name || ''),
                (place.address_components[1] &amp;&amp; place.address_components[1].short_name || ''),
                (place.address_components[2] &amp;&amp; place.address_components[2].short_name || '')
              ].join(' ');
          }
      });
  }
  </code></pre>
  
  <p>And the HTML is just</p>
  
  <pre><code>&lt;input id="pac-input" class="controls" type="text" placeholder="Enter a location"&gt;
  </code></pre>
  
  <p>This WORKS on a simple <em>.html</em> file. I can see the request to Google's servers in the "Network" tab of my console, like  :</p>
  
  <p><img src="https://i.stack.imgur.com/sjqW5.png" alt="Network tab OK"></p>
  
  <p>But in my project, the field appears with the placeholder, but when I type in, there's just ... Nothing. Like a simple text field. Anything in the console, just... anything, except the library places script which is correctly downloaded.</p>
  
  <p>I tried to change <code>z-index</code>, but the problem is still the same. I also tried to put the <code>Autocomplete</code> field elsewhere on the page (not on the Google Map itself) it doesn't care.</p>
  
  <p>I also tried to change the <code>$(document).ready</code> by <code>google.maps.event.addDomListener(window, 'load', initialize);</code> and the problem is ... the same !</p>
  
  <p>Oh, and by the way, I also try with the <a href="https://developers.google.com/maps/documentation/javascript/examples/places-searchbox?hl=FR" rel="nofollow noreferrer">Autocomplete Search Box</a>, the problem is <strong>exactly</strong> the same.</p>
  
  <p>Is there something obvious I'm missing ? Something to activate in Google Developpers console, to include in my project, anything... I'm new to <a href="/questions/tagged/javascript" class="post-tag" title="show questions tagged &#39;javascript&#39;" rel="tag">javascript</a> and <a href="/questions/tagged/jquery" class="post-tag" title="show questions tagged &#39;jquery&#39;" rel="tag">jquery</a>, so maybe I forget a fundamental thing ?</p>